1.loader {
2 --clr: #3498db;
3 /* color of spining  */
4 width: 50px;
5 height: 50px;
6 position: relative;
7}
8
9.loader:before, .loader:after {
10 content: "";
11 position: absolute;
12 top: -10px;
13 left: -10px;
14 width: 100%;
15 height: 100%;
16 border-radius: 100%;
17 border: 10px solid transparent;
18 border-top-color: var(--clr);
19}
20
21.loader:before {
22 z-index: 100;
23 animation: spin 1s infinite;
24}
25
26.loader:after {
27 border: 10px solid #ccc;
28}
29
30@keyframes spin {
31 0% {
32  -webkit-transform: rotate(0deg);
33  -ms-transform: rotate(0deg);
34  -o-transform: rotate(0deg);
35  transform: rotate(0deg);
36 }
37
38 100% {
39  -webkit-transform: rotate(360deg);
40  -ms-transform: rotate(360deg);
41  -o-transform: rotate(360deg);
42  transform: rotate(360deg);
43 }
44}
45