Loader by mobinkakei

1.loader {
2  --path: #2f3545;
3  --dot: #5628ee;
4  --duration: 3s;
5  width: 44px;
6  height: 44px;
7  position: relative;
8}
9
10.loader:before {
11  content: '';
12  width: 6px;
13  height: 6px;
14  border-radius: 50%;
15  position: absolute;
16  display: block;
17  background: var(--dot);
18  top: 37px;
19  left: 19px;
20  transform: translate(-18px, -18px);
21  animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
22}
23
24.loader svg {
25  display: block;
26  width: 100%;
27  height: 100%;
28}
29
30.loader svg rect, .loader svg polygon, .loader svg circle {
31  fill: none;
32  stroke: var(--path);
33  stroke-width: 10px;
34  stroke-linejoin: round;
35  stroke-linecap: round;
36}
37
38.loader svg polygon {
39  stroke-dasharray: 145 76 145 76;
40  stroke-dashoffset: 0;
41  animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
42}
43
44.loader svg rect {
45  stroke-dasharray: 192 64 192 64;
46  stroke-dashoffset: 0;
47  animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
48}
49
50.loader svg circle {
51  stroke-dasharray: 150 50 150 50;
52  stroke-dashoffset: 75;
53  animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
54}
55
56.loader.triangle {
57  width: 48px;
58}
59
60.loader.triangle:before {
61  left: 21px;
62  transform: translate(-10px, -18px);
63  animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
64}
65
66@keyframes pathTriangle {
67  33% {
68    stroke-dashoffset: 74;
69  }
70
71  66% {
72    stroke-dashoffset: 147;
73  }
74
75  100% {
76    stroke-dashoffset: 221;
77  }
78}
79
80@keyframes dotTriangle {
81  33% {
82    transform: translate(0, 0);
83  }
84
85  66% {
86    transform: translate(10px, -18px);
87  }
88
89  100% {
90    transform: translate(-10px, -18px);
91  }
92}
93
94@keyframes pathRect {
95  25% {
96    stroke-dashoffset: 64;
97  }
98
99  50% {
100    stroke-dashoffset: 128;
101  }
102
103  75% {
104    stroke-dashoffset: 192;
105  }
106
107  100% {
108    stroke-dashoffset: 256;
109  }
110}
111
112@keyframes dotRect {
113  25% {
114    transform: translate(0, 0);
115  }
116
117  50% {
118    transform: translate(18px, -18px);
119  }
120
121  75% {
122    transform: translate(0, -36px);
123  }
124
125  100% {
126    transform: translate(-18px, -18px);
127  }
128}
129
130@keyframes pathCircle {
131  25% {
132    stroke-dashoffset: 125;
133  }
134
135  50% {
136    stroke-dashoffset: 175;
137  }
138
139  75% {
140    stroke-dashoffset: 225;
141  }
142
143  100% {
144    stroke-dashoffset: 275;
145  }
146}
147
148.loader {
149  display: inline-block;
150  margin: 0 16px;
151}
152
153