Skip to content

Commit b8e5cb9

Browse files
alexkirszdanilowoz
alexkirsz
authored and
danilowoz
committed
feat(svg): add a gradientRatio prop (danilowoz#140)
* 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
1 parent 6f26e2d commit b8e5cb9

File tree

10 files changed

+205
-13203
lines changed

10 files changed

+205
-13203
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@ Defaults to `400`. It will be set in the viewbox attr in the `<svg />`.
9494

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

97+
**`gradientRatio? number`**
98+
99+
Defaults to `2`. Width of the animated gradient as a fraction of the viewbox width.
100+
97101
**`rtl? boolean`**
98102

99103
Defaults to `false`. Content right-to-left.

‎docs/intro.mdx‎

Lines changed: 1 addition & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
name: Home
2+
name: Welcome
33
route: /
44
---
55

@@ -58,65 +58,3 @@ const MyLoader = () => (
5858
```
5959

6060
**Still not clear?** Take a look at this working example at [codesandbox.io](https://codesandbox.io/s/moojk887z9)
61-
62-
## Options
63-
64-
**`animate?: boolean`**
65-
66-
Defaults to `true`. Opt-out of animations with `false`
67-
68-
**`ariaLabel? string | boolean`**
69-
70-
Defaults to `Loading interface...`. It's used to describe what element it is. Use `false` to remove.
71-
72-
**`speed?: number`**
73-
74-
Defaults to `2`. Animation speed in seconds.
75-
76-
**`interval?: number`**
77-
78-
Defaults to `0.25`. Interval of time between runs of the animation, as a fraction of the animation speed.
79-
80-
**`className? string`**
81-
82-
Defaults to an empty string. The classname will be set in the `<svg />` element.
83-
84-
**`width? number`**
85-
86-
Defaults to `400`. It will be set in the viewbox attr in the `<svg />`.
87-
88-
**`height? number`**
89-
90-
Defaults to `130`. It will be set in the viewbox attr in the `<svg />`.
91-
92-
**`rtl? boolean`**
93-
94-
Defaults to `false`. Content right-to-left.
95-
96-
**`preserveAspectRatio?: string`**
97-
98-
Defaults to `xMidYMid meet`. Aspect ratio option of `<svg/>`. See the available options [here](https://github.com/danilowoz/react-content-loader/blob/improv/doc/src/interface.ts#L7).
99-
100-
**`primaryColor?: string`**
101-
102-
Defaults to `#f3f3f3` which is used as background of animation.
103-
104-
**`secondaryColor?: string`**
105-
106-
Defaults to `#ecebeb` which is used as the placeholder/layer of animation.
107-
108-
**`primaryOpacity?: string`**
109-
110-
Defaults to `1`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#safari--ios)
111-
112-
**`secondaryOpacity?: string`**
113-
114-
Defaults to `1`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#safari--ios)
115-
116-
**`style?: React.CSSProperties`**
117-
118-
Defaults to an empty object.
119-
120-
**`uniquekey?: string`**
121-
122-
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).

‎docs/props.mdx‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
---
2+
name: Props
3+
route: /props
4+
---
5+
6+
import { Playground, PropsTable } from 'docz'
7+
import ContentLoader, { Facebook, Instagram } from '../src'
8+
9+
## `animate?: boolean`
10+
11+
Defaults to `true`. Opt-out of animations with `false`
12+
13+
<Playground>
14+
<Facebook animate={false} />
15+
</Playground>
16+
17+
## `ariaLabel? string | boolean`
18+
19+
Defaults to `Loading interface...`. It's used to describe what element it is. Use `false` to remove.
20+
21+
<Playground>
22+
<Facebook ariaLabel="my custom loader" />
23+
</Playground>
24+
25+
## `speed?: number`
26+
27+
Defaults to `2`. Animation speed in seconds.
28+
29+
<Playground>
30+
<Facebook speed={4} />
31+
<Facebook speed={1} />
32+
</Playground>
33+
34+
## `interval?: number`
35+
36+
Defaults to `0.25`. Interval of time between runs of the animation, as a fraction of the animation speed.
37+
38+
<Playground>
39+
<Facebook interval={0.8} />
40+
</Playground>
41+
42+
## `className? string`
43+
44+
Defaults to an empty string. The classname will be set in the `<svg />` element.
45+
46+
<Playground>
47+
<Facebook className="custom-classname" />
48+
</Playground>
49+
50+
## `width? number`
51+
52+
Defaults to `400`. It will be set in the viewbox attr in the `<svg />`.
53+
54+
<Playground>
55+
<Facebook width={200} />
56+
</Playground>
57+
58+
## `height? number`
59+
60+
Defaults to `130`. It will be set in the viewbox attr in the `<svg />`.
61+
62+
<Playground>
63+
<Facebook height={50} />
64+
</Playground>
65+
66+
## `gradientRatio? number`
67+
68+
Defaults to `2`. Width of the animated gradient as a fraction of the viewbox width.
69+
70+
<Playground>
71+
<Instagram
72+
gradientRatio={0.2}
73+
primaryColor={'#333'}
74+
secondaryColor={'#999'}
75+
/>
76+
<Instagram gradientRatio={4} primaryColor={'#333'} secondaryColor={'#999'} />
77+
</Playground>
78+
79+
## `rtl? boolean`
80+
81+
Defaults to `false`. Content right-to-left.
82+
83+
<Playground>
84+
<Instagram rtl />
85+
</Playground>
86+
87+
## `preserveAspectRatio?: string`
88+
89+
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).
90+
91+
<Playground>
92+
<Instagram preserveAspectRatio="none" />
93+
</Playground>
94+
95+
## `primaryColor?: string`
96+
97+
Defaults to `#f3f3f3` which is used as background of animation.
98+
99+
<Playground>
100+
<Facebook primaryColor="#333" />
101+
</Playground>
102+
103+
## `secondaryColor?: string`
104+
105+
Defaults to `#ecebeb` which is used as the placeholder/layer of animation.
106+
107+
<Playground>
108+
<Facebook secondaryColor="#333" />
109+
</Playground>
110+
111+
## `primaryOpacity?: string`
112+
113+
Defaults to `1`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)
114+
115+
<Playground>
116+
<Facebook primaryOpacity={0.06} />
117+
</Playground>
118+
119+
## `secondaryOpacity?: string`
120+
121+
Defaults to `1`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)
122+
123+
<Playground>
124+
<Facebook secondaryOpacity={0.06} />
125+
</Playground>
126+
127+
## `style?: React.CSSProperties`
128+
129+
Defaults to an empty object.
130+
131+
<Playground>
132+
<Facebook style={{ width: '100%' }} />
133+
</Playground>
134+
135+
## **`uniquekey?: string`**
136+
137+
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).
138+
139+
<Playground>
140+
<Facebook uniquekey="my-uniqye-key" />
141+
</Playground>
142+
143+
## `viewBox?: string`
144+
145+
Use viewbox props to set viewbox value.
146+
Additionally, pass viewBox props as empty string to remove viewBox.
147+
148+
<Playground>
149+
<ContentLoader viewBox="" />
150+
</Playground>
151+
152+
# Issues known
153+
154+
## BugFix in Safari
155+
156+
When using `rgba` as a `primaryColor` or `secondaryColor` value,
157+
[Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180),
158+
meaning that the color will be opaque. To prevent this, instead of using an
159+
`rgba` value for `primaryColor`/`secondaryColor`, use the `rgb` equivalent and
160+
move the alpha channel value to the `primaryOpacity`/`secondaryOpacity` props.
161+
162+
<Playground>
163+
<ContentLoader
164+
primaryColor="rgb(0,0,0)"
165+
secondaryColor="rgb(0,0,0)"
166+
primaryOpacity={0.06}
167+
secondaryOpacity={0.12}
168+
/>
169+
</Playground>

‎docs/usage.mdx‎

Lines changed: 1 addition & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,9 @@ import ContentLoader, {
1212
List,
1313
BulletList,
1414
} from '../src'
15-
import FacebookStyle from '../src/stylized/FacebookStyle'
1615

1716
## Usage
1817

19-
<PropsTable of={FacebookStyle} />
20-
2118
## Different Type of Loaders
2219

2320
### Facebook Style Loader
@@ -53,75 +50,9 @@ import FacebookStyle from '../src/stylized/FacebookStyle'
5350
### Custom Loader
5451

5552
<Playground>
56-
<ContentLoader
57-
height={140}
58-
speed={2}
59-
interval={0.5}
60-
primaryColor={'#333'}
61-
secondaryColor={'#999'}
62-
>
53+
<ContentLoader>
6354
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
6455
<rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
6556
<circle cx="35" cy="35" r="35" />
6657
</ContentLoader>
6758
</Playground>
68-
69-
## Unique key
70-
71-
<Playground>
72-
<Facebook uniquekey="unique-key" />
73-
</Playground>
74-
75-
## No Animation
76-
77-
Set animate props to false to stop Animation
78-
79-
<Playground>
80-
<Facebook animate={false} />
81-
</Playground>
82-
83-
## RTL: Right To Left Animation
84-
85-
Set rtl props to animate from right to left
86-
87-
<Playground>
88-
<Instagram rtl />
89-
</Playground>
90-
91-
## Use ViewBox
92-
93-
Use viewbox props to set viewbox value.
94-
Additionally, pass viewBox props as empty string to remove viewBox.
95-
96-
<Playground>
97-
<ContentLoader viewBox="" />
98-
</Playground>
99-
100-
## Custom aria label
101-
102-
<Playground>
103-
<ContentLoader ariaLabel="My custom loader" />
104-
</Playground>
105-
106-
## Remove aria label
107-
108-
<Playground>
109-
<ContentLoader ariaLabel={false} />
110-
</Playground>
111-
112-
## BugFix in Safari
113-
114-
When using `rgba` as a `primaryColor` or `secondaryColor` value,
115-
[Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180),
116-
meaning that the color will be opaque. To prevent this, instead of using an
117-
`rgba` value for `primaryColor`/`secondaryColor`, use the `rgb` equivalent and
118-
move the alpha channel value to the `primaryOpacity`/`secondaryOpacity` props.
119-
120-
<Playground>
121-
<ContentLoader
122-
primaryColor="rgb(0,0,0)"
123-
secondaryColor="rgb(0,0,0)"
124-
primaryOpacity={0.06}
125-
secondaryOpacity={0.12}
126-
/>
127-
</Playground>

‎doczrc.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import emoji from "remark-emoji"
1+
import emoji from 'remark-emoji'
22

33
export default {
4-
title: "React Content Loader",
4+
title: 'React Content Loader',
55
typescript: true,
66
mdPlugins: [emoji],
7-
codeSandbox: false,
7+
menu: ['Welcome', 'Usage', 'Props'],
88
htmlContext: {
99
head: {
1010
links: [
1111
{
12-
rel: "stylesheet",
13-
href: "https://codemirror.net/theme/dracula.css"
14-
}
15-
]
16-
}
12+
rel: 'stylesheet',
13+
href: 'https://codemirror.net/theme/dracula.css',
14+
},
15+
],
16+
},
1717
},
1818
themeConfig: {
19-
codemirrorTheme: "dracula",
19+
codemirrorTheme: 'dracula',
2020
colors: {
21-
primary: "#673ab7",
22-
sidebarBg: "#f3f3f3"
23-
}
24-
}
21+
primary: '#673ab7',
22+
sidebarBg: '#f3f3f3',
23+
},
24+
},
2525
}

‎src/Holder.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { IContentLoaderProps } from './interface'
66
export const defaultProps: IContentLoaderProps = {
77
animate: true,
88
ariaLabel: 'Loading interface...',
9+
gradientRatio: 2,
910
height: 130,
1011
interval: 0.25,
1112
preserveAspectRatio: 'none',

0 commit comments

Comments
 (0)