Loader by SelfMadeSystem

1.loader {
2  display: block;
3  width: 12em;
4  height: 12em;
5  overflow: visible;
6}
7
8.loader path.fill {
9  fill: #2Af2;
10  animation: fill 4s ease-in-out infinite;
11}
12
13.loader .dash path {
14  stroke: #2AF;
15  stroke-width: 1px;
16  stroke-linecap: round;
17  animation: dashArray var(--sped, 2s) ease-in-out infinite,
18    dashOffset var(--sped, 2s) linear infinite;
19}
20
21.loader .dash path.aaa {
22  stroke-width: 2px;
23  stroke-linecap: butt;
24  clip-path: path('M 20.4603 48.5493 L 16.6461 46.9584 C 17.3209 48.3794 18.4917 49.5682 20.0447 50.2206 C 23.4007 51.6328 27.2707 50.0262 28.6694 46.6367 C 29.3464 44.9966 29.3509 43.1867 28.6806 41.5422 C 28.0103 39.8977 26.7434 38.6151 25.119 37.9315 C 23.5035 37.2544 21.7741 37.279 20.2547 37.8576 L 24.1961 39.5022 C 26.6719 40.5434 27.8427 43.4124 26.8104 45.9105 C 25.7803 48.4085 22.936 49.5905 20.4603 48.5493 Z');
25}
26
27.loader .dash path.big {
28  stroke-width: 2px;
29  filter: drop-shadow(0 0 2px #2AF);
30}
31
32@keyframes dashArray {
33  0% {
34    stroke-dasharray: 0 1 359 0;
35  }
36
37  50% {
38    stroke-dasharray: 0 359 1 0;
39  }
40
41  100% {
42    stroke-dasharray: 359 1 0 0;
43  }
44}
45
46@keyframes dashOffset {
47  0% {
48    stroke-dashoffset: -5;
49  }
50
51  100% {
52    stroke-dashoffset: -365;
53  }
54}
55
56@keyframes fill {
57  30%,
58  55% {
59    fill: #2AF0;
60  }
61}
62
63