Component - Kodeset

Loader

1 
2<svg class="pl" width="240" height="240" viewBox="0 0 240 240">
3  <circle class="pl__ring pl__ring--a" cx="120" cy="120" r="105" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 660" stroke-dashoffset="-330" stroke-linecap="round"></circle>
4  <circle class="pl__ring pl__ring--b" cx="120" cy="120" r="35" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 220" stroke-dashoffset="-110" stroke-linecap="round"></circle>
5  <circle class="pl__ring pl__ring--c" cx="85" cy="120" r="70" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round"></circle>
6  <circle class="pl__ring pl__ring--d" cx="155" cy="120" r="70" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round"></circle>
7</svg>

  1 
  2.pl {
  3  width: 6em;
  4  height: 6em;
  5}
  6 
  7.pl__ring {
  8  animation: ringA 2s linear infinite;
  9}
 10 
 11.pl__ring--a {
 12  stroke: #f42f25;
 13}
 14 
 15.pl__ring--b {
 16  animation-name: ringB;
 17  stroke: #f49725;
 18}
 19 
 20.pl__ring--c {
 21  animation-name: ringC;
 22  stroke: #255ff4;
 23}
 24 
 25.pl__ring--d {
 26  animation-name: ringD;
 27  stroke: #f42582;
 28}
 29 
 30/* Animations */
 31@keyframes ringA {
 32  from, 4% {
 33    stroke-dasharray: 0 660;
 34    stroke-width: 20;
 35    stroke-dashoffset: -330;
 36  }
 37 
 38  12% {
 39    stroke-dasharray: 60 600;
 40    stroke-width: 30;
 41    stroke-dashoffset: -335;
 42  }
 43 
 44  32% {
 45    stroke-dasharray: 60 600;
 46    stroke-width: 30;
 47    stroke-dashoffset: -595;
 48  }
 49 
 50  40%, 54% {
 51    stroke-dasharray: 0 660;
 52    stroke-width: 20;
 53    stroke-dashoffset: -660;
 54  }
 55 
 56  62% {
 57    stroke-dasharray: 60 600;
 58    stroke-width: 30;
 59    stroke-dashoffset: -665;
 60  }
 61 
 62  82% {
 63    stroke-dasharray: 60 600;
 64    stroke-width: 30;
 65    stroke-dashoffset: -925;
 66  }
 67 
 68  90%, to {
 69    stroke-dasharray: 0 660;
 70    stroke-width: 20;
 71    stroke-dashoffset: -990;
 72  }
 73}
 74 
 75@keyframes ringB {
 76  from, 12% {
 77    stroke-dasharray: 0 220;
 78    stroke-width: 20;
 79    stroke-dashoffset: -110;
 80  }
 81 
 82  20% {
 83    stroke-dasharray: 20 200;
 84    stroke-width: 30;
 85    stroke-dashoffset: -115;
 86  }
 87 
 88  40% {
 89    stroke-dasharray: 20 200;
 90    stroke-width: 30;
 91    stroke-dashoffset: -195;
 92  }
 93 
 94  48%, 62% {
 95    stroke-dasharray: 0 220;
 96    stroke-width: 20;
 97    stroke-dashoffset: -220;
 98  }
 99 
100  70% {
101    stroke-dasharray: 20 200;
102    stroke-width: 30;
103    stroke-dashoffset: -225;
104  }
105 
106  90% {
107    stroke-dasharray: 20 200;
108    stroke-width: 30;
109    stroke-dashoffset: -305;
110  }
111 
112  98%, to {
113    stroke-dasharray: 0 220;
114    stroke-width: 20;
115    stroke-dashoffset: -330;
116  }
117}
118 
119@keyframes ringC {
120  from {
121    stroke-dasharray: 0 440;
122    stroke-width: 20;
123    stroke-dashoffset: 0;
124  }
125 
126  8% {
127    stroke-dasharray: 40 400;
128    stroke-width: 30;
129    stroke-dashoffset: -5;
130  }
131 
132  28% {
133    stroke-dasharray: 40 400;
134    stroke-width: 30;
135    stroke-dashoffset: -175;
136  }
137 
138  36%, 58% {
139    stroke-dasharray: 0 440;
140    stroke-width: 20;
141    stroke-dashoffset: -220;
142  }
143 
144  66% {
145    stroke-dasharray: 40 400;
146    stroke-width: 30;
147    stroke-dashoffset: -225;
148  }
149 
150  86% {
151    stroke-dasharray: 40 400;
152    stroke-width: 30;
153    stroke-dashoffset: -395;
154  }
155 
156  94%, to {
157    stroke-dasharray: 0 440;
158    stroke-width: 20;
159    stroke-dashoffset: -440;
160  }
161}
162 
163@keyframes ringD {
164  from, 8% {
165    stroke-dasharray: 0 440;
166    stroke-width: 20;
167    stroke-dashoffset: 0;
168  }
169 
170  16% {
171    stroke-dasharray: 40 400;
172    stroke-width: 30;
173    stroke-dashoffset: -5;
174  }
175 
176  36% {
177    stroke-dasharray: 40 400;
178    stroke-width: 30;
179    stroke-dashoffset: -175;
180  }
181 
182  44%, 50% {
183    stroke-dasharray: 0 440;
184    stroke-width: 20;
185    stroke-dashoffset: -220;
186  }
187 
188  58% {
189    stroke-dasharray: 40 400;
190    stroke-width: 30;
191    stroke-dashoffset: -225;
192  }
193 
194  78% {
195    stroke-dasharray: 40 400;
196    stroke-width: 30;
197    stroke-dashoffset: -395;
198  }
199 
200  86%, to {
201    stroke-dasharray: 0 440;
202    stroke-width: 20;
203    stroke-dashoffset: -440;
204  }
205}

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.