mirror of
https://github.com/zhigang1992/react-content-loader.git
synced 2026-05-10 22:03:28 +08:00
b8e5cb9e8c
* feat(svg): add an interval prop Add an interval prop that controls the duration of the interval between two animations. For instance, an interval of `.25` and an animation speed of `2` imply that the animation will take 1.5s to complete, and wait 0.5s before starting again. * feat(svg): add a gradientRatio prop Add a gradientRatio prop that controls the width of the gradient relative to the viewbox's own width. For instance, a gradientRatio of `0.5` and a width of `200` imply that the resulting gradient will have a width of 100px. * docs(docz): add props section
170 lines
3.9 KiB
Plaintext
170 lines
3.9 KiB
Plaintext
---
|
|
name: Props
|
|
route: /props
|
|
---
|
|
|
|
import { Playground, PropsTable } from 'docz'
|
|
import ContentLoader, { Facebook, Instagram } from '../src'
|
|
|
|
## `animate?: boolean`
|
|
|
|
Defaults to `true`. Opt-out of animations with `false`
|
|
|
|
<Playground>
|
|
<Facebook animate={false} />
|
|
</Playground>
|
|
|
|
## `ariaLabel? string | boolean`
|
|
|
|
Defaults to `Loading interface...`. It's used to describe what element it is. Use `false` to remove.
|
|
|
|
<Playground>
|
|
<Facebook ariaLabel="my custom loader" />
|
|
</Playground>
|
|
|
|
## `speed?: number`
|
|
|
|
Defaults to `2`. Animation speed in seconds.
|
|
|
|
<Playground>
|
|
<Facebook speed={4} />
|
|
<Facebook speed={1} />
|
|
</Playground>
|
|
|
|
## `interval?: number`
|
|
|
|
Defaults to `0.25`. Interval of time between runs of the animation, as a fraction of the animation speed.
|
|
|
|
<Playground>
|
|
<Facebook interval={0.8} />
|
|
</Playground>
|
|
|
|
## `className? string`
|
|
|
|
Defaults to an empty string. The classname will be set in the `<svg />` element.
|
|
|
|
<Playground>
|
|
<Facebook className="custom-classname" />
|
|
</Playground>
|
|
|
|
## `width? number`
|
|
|
|
Defaults to `400`. It will be set in the viewbox attr in the `<svg />`.
|
|
|
|
<Playground>
|
|
<Facebook width={200} />
|
|
</Playground>
|
|
|
|
## `height? number`
|
|
|
|
Defaults to `130`. It will be set in the viewbox attr in the `<svg />`.
|
|
|
|
<Playground>
|
|
<Facebook height={50} />
|
|
</Playground>
|
|
|
|
## `gradientRatio? number`
|
|
|
|
Defaults to `2`. Width of the animated gradient as a fraction of the viewbox width.
|
|
|
|
<Playground>
|
|
<Instagram
|
|
gradientRatio={0.2}
|
|
primaryColor={'#333'}
|
|
secondaryColor={'#999'}
|
|
/>
|
|
<Instagram gradientRatio={4} primaryColor={'#333'} secondaryColor={'#999'} />
|
|
</Playground>
|
|
|
|
## `rtl? boolean`
|
|
|
|
Defaults to `false`. Content right-to-left.
|
|
|
|
<Playground>
|
|
<Instagram rtl />
|
|
</Playground>
|
|
|
|
## `preserveAspectRatio?: string`
|
|
|
|
Defaults to `xMidYMid meet`. Aspect ratio option of `<svg/>`. See the available options [here](https://github.com/danilowoz/react-content-loader/blob/master/src/interface.ts#L7).
|
|
|
|
<Playground>
|
|
<Instagram preserveAspectRatio="none" />
|
|
</Playground>
|
|
|
|
## `primaryColor?: string`
|
|
|
|
Defaults to `#f3f3f3` which is used as background of animation.
|
|
|
|
<Playground>
|
|
<Facebook primaryColor="#333" />
|
|
</Playground>
|
|
|
|
## `secondaryColor?: string`
|
|
|
|
Defaults to `#ecebeb` which is used as the placeholder/layer of animation.
|
|
|
|
<Playground>
|
|
<Facebook secondaryColor="#333" />
|
|
</Playground>
|
|
|
|
## `primaryOpacity?: string`
|
|
|
|
Defaults to `1`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)
|
|
|
|
<Playground>
|
|
<Facebook primaryOpacity={0.06} />
|
|
</Playground>
|
|
|
|
## `secondaryOpacity?: string`
|
|
|
|
Defaults to `1`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)
|
|
|
|
<Playground>
|
|
<Facebook secondaryOpacity={0.06} />
|
|
</Playground>
|
|
|
|
## `style?: React.CSSProperties`
|
|
|
|
Defaults to an empty object.
|
|
|
|
<Playground>
|
|
<Facebook style={{ width: '100%' }} />
|
|
</Playground>
|
|
|
|
## **`uniquekey?: string`**
|
|
|
|
Defaults to random unique id. Use the same value of prop key, that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78).
|
|
|
|
<Playground>
|
|
<Facebook uniquekey="my-uniqye-key" />
|
|
</Playground>
|
|
|
|
## `viewBox?: string`
|
|
|
|
Use viewbox props to set viewbox value.
|
|
Additionally, pass viewBox props as empty string to remove viewBox.
|
|
|
|
<Playground>
|
|
<ContentLoader viewBox="" />
|
|
</Playground>
|
|
|
|
# Issues known
|
|
|
|
## BugFix in Safari
|
|
|
|
When using `rgba` as a `primaryColor` or `secondaryColor` value,
|
|
[Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180),
|
|
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.
|
|
|
|
<Playground>
|
|
<ContentLoader
|
|
primaryColor="rgb(0,0,0)"
|
|
secondaryColor="rgb(0,0,0)"
|
|
primaryOpacity={0.06}
|
|
secondaryOpacity={0.12}
|
|
/>
|
|
</Playground>
|