1.loader {
2  position: relative;
3  transform: scale(2);
4  border-radius: 50%;
5  border: 1px solid;
6  width: 30px;
7  height: 30px;
8  color: white;
9}
10
11.loader::after {
12  position: absolute;
13  width: 0px;
14  height: 10px;
15  display: block;
16  border-left: 1px solid #fff;
17  content: '';
18  left: 14px;
19  border-radius: 1px;
20  top: 4px;
21  animation-duration: 1s;
22}
23
24.loader::before {
25  position: absolute;
26  width: 0px;
27  height: 10px;
28  display: block;
29  border-left: 1px solid #fff;
30  content: '';
31  left: 14px;
32  border-radius: 1px;
33  top: 4px;
34  animation-duration: 40s;
35}
36
37.loader::before,.loader::after {
38  transform-origin: bottom;
39  animation-name: dial;
40  animation-iteration-count: infinite;
41  animation-timing-function: linear;
42}
43
44@keyframes dial {
45  0% {
46    transform: rotate(0deg);
47  }
48
49  100% {
50    transform: rotate(360deg);
51  }
52}