CSS animations examples, using Animate.css
We decided to use animate.css because it's very easy to get started with, and very lightweight too.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const AnimatedLoader = props => {
return (
<svg
viewBox="0 0 200 200"
style={{
width: '6%',
minWidth: 150,
}}
{...props}
>
<circle
cx={100.112}
cy={139.165}
r={11.27}
fill={'#0028FF'}
// Look at the animate.css classes below, that's what performs the animation
className={'animate__animated animate__bounce animate__infinite animate__slower'}
/>
<path d="M100.885 189.549c-21.767 0-40.771-17.789-40.771-38.12v-43.313h20.883v43.423c0 8.839 9.613 17.237 19.778 17.237 9.834 0 18.342-8.066 18.342-17.237v-43.423H140v43.423c.11 20.552-17.9 38.01-39.115 38.01z" />
</svg>
);
};
<AnimatedLoader />