Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Big shift: use mask + css gradient instead of SVG Animation #220

Closed
wants to merge 4 commits into from
Closed

Big shift: use mask + css gradient instead of SVG Animation #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1b9fdb9
feat(mask approach): update to css grandient
danilowoz Oct 4, 2020
2700a55
6.0.0-beta.0
danilowoz Oct 4, 2020
44326bc
6.0.0-beta.1
danilowoz Oct 4, 2020
8ed4d3b
6.0.0-beta.2
danilowoz Oct 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 1 addition & 25 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,16 +112,13 @@ const MyLoader = () => (
| ------------------------------------------------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`animate?: boolean`** <br/> Defaults to `true` | React DOM<br/>React Native | Opt-out of animations with `false` |
| **`title?: string`** <br/> Defaults to `Loading interface...` | React DOM only | It's used to describe what element it is. <br />Use `''` (empty string) to remove. |
| **`baseUrl?: string`**<br /> Defaults to an empty string | React DOM only | Required if you're using `<base url="/" />` document `<head/>`. <br/>This prop is common used as: <br/>`<ContentLoader baseUrl={window.location.pathname} />` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93). |
| **`speed?: number`** <br /> Defaults to `1.2` | React DOM<br/>React Native | Animation speed in seconds. |
| **`interval?: number`** <br /> Defaults to `0.25` | React DOM only | Interval of time between runs of the animation, <br/>as a fraction of the animation speed. |
| **`viewBox?: string`** <br /> Defaults to `undefined` | React DOM<br/>React Native | Use viewBox props to set a custom viewBox value, <br/>for more information about how to use it, <br/>read the article [How to Scale SVG](https://css-tricks.com/scale-svg/). |
| **`gradientRatio?: number`** <br /> Defaults to `1.2` | React DOM only | Width of the animated gradient as a fraction of the view box width. |
| **`rtl?: boolean`** <br /> Defaults to `false` | React DOM<br/>React Native | Content right-to-left. |
| **`backgroundColor?: string`** <br /> Defaults to `#f5f6f7` | React DOM<br/>React Native | Used as background of animation. |
| **`foregroundColor?: string`** <br /> Defaults to `#eee` | React DOM<br/>React Native | Used as the foreground of animation. |
| **`backgroundOpacity?: number`** <br /> Defaults to `1` | React DOM only | Background opacity (0 = transparent, 1 = opaque)<br/>used to solve an issue in [Safari](#safari--ios) |
| **`foregroundOpacity?: number`** <br /> Defaults to `1` | React DOM only | Animation opacity (0 = transparent, 1 = opaque)<br/>used to solve an issue in [Safari](#safari--ios) |
| **`foregroundColor?: string`** <br /> Defaults to `#eee` | React DOM<br/>React Native | Used as the foreground of animation. | |
| **`style?: React.CSSProperties`** <br /> Defaults to `{}` | React DOM only | |
| **`uniqueKey?: string`** <br /> Defaults to random unique id | React DOM only | Use the same value of prop key, <br/>that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78). |

Expand Down Expand Up @@ -234,27 +231,6 @@ import { Facebook } from 'react-content-loader'
const MyFacebookLoader = () => <Facebook uniqueKey="my-random-valye" />
```

#### **Alpha is not working: Safari / iOS**

When using `rgba` as a `backgroundColor` or `foregroundColor` 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 a `rgba` value for `backgroundColor`/`foregroundColor`, use the `rgb` equivalent and move the alpha channel value to the `backgroundOpacity`/`foregroundOpacity` props.

```jsx
{/* Opaque color in Safari and iOS */}
<ContentLoader
  backgroundColor="rgba(0,0,0,0.06)"
  foregroundColor="rgba(0,0,0,0.12)">


{/_ Semi-transparent color in Safari and iOS _/}
<ContentLoader
    backgroundColor="rgb(0,0,0)"
    foregroundColor="rgb(0,0,0)"
    backgroundOpacity={0.06}
    foregroundOpacity={0.12}>


```

#### **Black box in Safari / iOS (again)**

Using the base tag on a page that contains SVG elements fails to render and it looks like a black box. Just remove the **base-href** tag from the `<head />` and issue solved.
Expand Down
136 changes: 60 additions & 76 deletions docs/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,67 +85,6 @@ foregroundColor.story = {
},
}

/**
* Background opacity
*/
export const backgroundOpacity = () => {
return (
<>
<SyntaxCode>{'<ContentLoader backgroundOpacity="#333" />'}</SyntaxCode>
<ContentLoader backgroundOpacity={0.06} />
</>
)
}

backgroundOpacity.story = {
parameters: {
notes: `## \`backgroundOpacity?: number\`

Defaults to \`1\`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)`,
},
}

/**
* Foreground opacity
*/
export const foregroundOpacity = () => {
return (
<>
<SyntaxCode>{'<ContentLoader foregroundOpacity={0.06} />'}</SyntaxCode>
<ContentLoader foregroundOpacity={0.06} />
</>
)
}

foregroundOpacity.story = {
parameters: {
notes: `## \`foregroundOpacity?: number\`

Defaults to \`1\`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)`,
},
}

/**
* Base URL
*/
export const baseURL = () => {
return (
<>
<SyntaxCode>{'<ContentLoader baseUrl="" />'}</SyntaxCode>
<ContentLoader baseUrl="" />
</>
)
}

baseURL.story = {
parameters: {
notes: `## \`baseUrl?: string\`

Required if you're using \`<base url="/" />\` in the \`<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](https://github.com/danilowoz/react-content-loader/issues/93).
`,
},
}

/**
* Children
*/
Expand Down Expand Up @@ -180,23 +119,37 @@ export const gradientRatio = () => {
return (
<>
<SyntaxCode>{`<ContentLoader
gradientRatio={0.2}
gradientRatio={1.5}
backgroundColor={'#333'}
foregroundColor={'#999'}
/>`}</SyntaxCode>
<ContentLoader
gradientRatio={0.2}
speed={6}
gradientRatio={1.5}
backgroundColor={'#333'}
foregroundColor={'#999'}
/>

<SyntaxCode>{`<ContentLoader
gradientRatio={4}
gradientRatio={2}
backgroundColor={'#333'}
foregroundColor={'#999'}
/>`}</SyntaxCode>
<ContentLoader
gradientRatio={4}
speed={6}
gradientRatio={2}
backgroundColor={'#333'}
foregroundColor={'#999'}
/>

<SyntaxCode>{`<ContentLoader
gradientRatio={6}
backgroundColor={'#333'}
foregroundColor={'#999'}
/>`}</SyntaxCode>
<ContentLoader
speed={6}
gradientRatio={6}
backgroundColor={'#333'}
foregroundColor={'#999'}
/>
Expand Down Expand Up @@ -235,22 +188,31 @@ speed.story = {
}

/**
* Interval
* Delay
*/
export const interval = () => {
export const delay = () => {
return (
<>
<SyntaxCode>{`<ContentLoader interval={0.8} />`}</SyntaxCode>
<ContentLoader interval={0.8} />
<SyntaxCode>{`<ContentLoader delay={0} />`}</SyntaxCode>
<ContentLoader delay={0} />

<SyntaxCode>{`<ContentLoader delay={0.8} />`}</SyntaxCode>
<ContentLoader delay={0.8} />

<SyntaxCode>{`<ContentLoader delay={1} />`}</SyntaxCode>
<ContentLoader delay={1} />

<SyntaxCode>{`<ContentLoader delay={2} />`}</SyntaxCode>
<ContentLoader delay={2} />
</>
)
}

interval.story = {
delay.story = {
parameters: {
notes: `## \`interval?: number\`
notes: `## \`delay?: number\`

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

Expand Down Expand Up @@ -299,10 +261,32 @@ uniqueKey.story = {
*/
export const responsive = () => {
return (
<div style={{ width: 200, border: '1px solid #eee' }}>
<SyntaxCode>{"<ContentLoader style={{ width: '100%' }} />'"}</SyntaxCode>
<ContentLoader />
</div>
<>
<div style={{ width: 200, border: '1px solid #eee' }}>
<SyntaxCode>
{"<ContentLoader style={{ width: '100%', height: 'auto' }} />'"}
</SyntaxCode>
<ContentLoader style={{ width: '100%', height: 'auto' }} />
</div>

<div style={{ width: 200, border: '1px solid #eee' }}>
<ContentLoader
height={465}
width={600}
viewBox="0 0 600 465"
style={{ width: '100%', height: 'auto' }}
>
<rect x="0" y="402" rx="8" ry="8" width="172" height="18" />
<rect x="0" y="448" rx="8" ry="8" width="123" height="13" />
<rect x="430" y="410" rx="8" ry="8" width="123" height="13" />
<rect x="0" y="378" rx="0" ry="0" width="559" height="2" />
</ContentLoader>
</div>

<div style={{ width: 400, height: 400, border: '1px solid #eee' }}>
<Code style={{ width: '100%', height: '100%' }} />
</div>
</>
)
}

Expand Down
3 changes: 2 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,5 +132,6 @@
],
"engines": {
"node": ">=10"
}
},
"version": "6.0.0-beta.2"
}
Loading