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