Skip to content

Commit 666b7e3

Browse files
emilkowalskiemilkowalski
authored
Merge pull request #40 from Bartek532/three-dots-loader
Three dots loader
2 parents eca7796 + 936f5fd commit 666b7e3

File tree

2 files changed

+172
-1
lines changed

2 files changed

+172
-1
lines changed

‎components/Snippets/ThreeDotsLoader.js

+169
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import { styled, keyframes } from 'stitches.config.js';
2+
3+
const Component = () => {
4+
return <Wrapper />;
5+
};
6+
7+
const flashing = keyframes({
8+
'0%': { backgroundColor: '$white' },
9+
'50%, 100%': {
10+
backgroundColor: 'rgba(255, 255, 255, 0.3)'
11+
}
12+
});
13+
14+
const Wrapper = styled('div', {
15+
position: 'relative',
16+
width: '14px',
17+
height: '14px',
18+
borderRadius: '50%',
19+
backgroundColor: '$white',
20+
color: '$white',
21+
animation: `${flashing} 0.8s infinite linear alternate .4s`,
22+
23+
'&::after, &::before': {
24+
content: '',
25+
display: 'inline-block',
26+
position: 'absolute',
27+
top: 0,
28+
width: '14px',
29+
height: '14px',
30+
borderRadius: '50%',
31+
backgroundColor: '$white',
32+
color: '$white'
33+
},
34+
'&::before': {
35+
left: '-21px',
36+
animation: `${flashing} 0.8s infinite alternate`
37+
},
38+
39+
'&::after': {
40+
left: '21px',
41+
animation: `${flashing} 0.8s infinite alternate .8s`
42+
}
43+
});
44+
45+
const stitchesStyling = `
46+
const flashing = keyframes({
47+
'0%': { backgroundColor: '$white' },
48+
'50%, 100%': {
49+
backgroundColor: 'rgba(255, 255, 255, 0.3)'
50+
}
51+
});
52+
53+
const exampleWrapper = styled('div', {
54+
position: 'relative',
55+
width: '14px',
56+
height: '14px',
57+
borderRadius: '50%',
58+
backgroundColor: 'white',
59+
color: 'white',
60+
animation: 'flashing 0.8s infinite linear alternate .4s',
61+
62+
'&::after, &::before': {
63+
content: '',
64+
display: 'inline-block',
65+
position: 'absolute',
66+
top: 0,
67+
width: '14px',
68+
height: '14px',
69+
borderRadius: '50%',
70+
backgroundColor: 'white',
71+
color: 'white'
72+
},
73+
'&::before': {
74+
left: '-21px',
75+
animation: 'flashing 0.8s infinite alternate'
76+
},
77+
78+
'&::after': {
79+
left: '21px',
80+
animation: 'flashing 0.8s infinite alternate .8s'
81+
}
82+
});`;
83+
84+
const cssStyling = `
85+
.exampleClass {
86+
position: relative;
87+
width: 14px;
88+
height: 14px;
89+
border-radius: 50%;
90+
background-color: white;
91+
color: white;
92+
animation: flashing 0.8s infinite linear alternate .4s;
93+
}
94+
95+
.exampleClass::after,
96+
.exampleClass::before {
97+
content: '';
98+
display: inline-block;
99+
position: absolute;
100+
top: 0;
101+
width: 14px;
102+
height: 14px;
103+
border-radius: 50%;
104+
background-color: white;
105+
color: white;
106+
}
107+
108+
.exampleClass::before {
109+
left: -21px;
110+
animation: flashing 0.8s infinite alternate;
111+
}
112+
113+
.exampleClass::after {
114+
left: 21px;
115+
animation: flashing 0.8s infinite alternate .8s;
116+
}
117+
118+
@keyframes flashing {
119+
0% { background-color: white }
120+
50%, 100% { background-color: rgba(255, 255, 255, 0.3) }
121+
}
122+
`;
123+
124+
const scssStyling = `
125+
.exampleClass {
126+
position: relative;
127+
width: 14px;
128+
height: 14px;
129+
border-radius: 50%;
130+
background-color: white;
131+
color: white;
132+
animation: flashing 0.8s infinite linear alternate 0.4s;
133+
134+
&::before,
135+
&::after {
136+
content: '';
137+
display: inline-block;
138+
position: absolute;
139+
top: 0;
140+
width: 14px;
141+
height: 14px;
142+
border-radius: 50%;
143+
background-color: white;
144+
color: white;
145+
}
146+
147+
&::before {
148+
left: -21px;
149+
animation: flashing 0.8s infinite alternate;
150+
}
151+
152+
&::after {
153+
left: 21px;
154+
animation: flashing 0.8s infinite alternate 0.8s;
155+
}
156+
}
157+
158+
@keyframes flashing {
159+
0% {
160+
background-color: white;
161+
}
162+
50%,
163+
100% {
164+
background-color: rgba(255, 255, 255, 0.3);
165+
}
166+
}
167+
`;
168+
169+
export { stitchesStyling, cssStyling, scssStyling, Component };

‎components/Snippets/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import * as HorizontalOverlay from './HorizontalOverlay';
1010
import * as BorderFade from './BorderFade';
1111
import * as TextTransformX from './TextTransformX';
1212
import * as CircleScaleButton from './CircleScaleButton';
13+
import * as ThreeDotsLoader from './ThreeDotsLoader';
1314

1415
const allSnippets = [
1516
UnderlineLeftRight,
@@ -23,7 +24,8 @@ const allSnippets = [
2324
HorizontalOverlay,
2425
BorderFade,
2526
TextTransformX,
26-
CircleScaleButton
27+
CircleScaleButton,
28+
ThreeDotsLoader
2729
];
2830

2931
export default allSnippets;

0 commit comments

Comments
 (0)