Still not clear? Take a look at this working example at codesandbox.io

Options

animate?: boolean

Defaults to true. Opt-out of animations with false

ariaLabel? string | boolean

Defaults to Loading interface.... It’s used to describe what element it is. Use false to remove.

baseUrl? string

Required if you’re using <base url="/" /> in your <head/>. Defaults to an empty string. This prop is common used as: <ContentLoader baseUrl={window.location.pathname} /> which will fill the SVG attribute with the relative path. Related #93.

speed?: number

Defaults to 2. Animation speed in seconds.

interval?: number

Defaults to 0.25. Interval of time between runs of the animation, as a fraction of the animation speed.

className? string

Defaults to an empty string. The classname will be set in the <svg /> element.

width? number

Defaults to 400. It will be set in the viewbox attr in the <svg />.

height? number

Defaults to 130. It will be set in the viewbox attr in the <svg />.

gradientRatio? number

Defaults to 2. Width of the animated gradient as a fraction of the viewbox width.

rtl? boolean

Defaults to false. Content right-to-left.

preserveAspectRatio?: string

Defaults to xMidYMid meet. Aspect ratio option of <svg/>. See the available options here.

primaryColor?: string

Defaults to #f3f3f3 which is used as background of animation.

secondaryColor?: string

Defaults to #ecebeb which is used as the placeholder/layer of animation.

Commit messages

Commit messages should follow the commit message convention so, changelogs could be generated automatically by that. Commit messages are validated automatically upon commit. If you aren’t familiar with the commit message convention, you can use yarn commit (or npm run commit) instead of git commit, which provides an interactive CLI for generating proper commit messages.

License

Known Issues

Alpha is not working: Safari / iOS

When using rgba as a primaryColor or secondaryColor value, Safari does not respect the alpha channel, meaning that the color will be opaque. To prevent this, instead of using an rgba value for primaryColor/secondaryColor, use the rgb equivalent and move the alpha channel value to the primaryOpacity/secondaryOpacity props.