1.spinner {
2 position: relative;
3 width: 56px;
4 height: 56px;
5 animation: spinner-3a5251 1.25s infinite linear;
6}
7
8.spinner div {
9 position: absolute;
10 top: 50%;
11 left: 50%;
12 width: 0;
13 height: 0;
14 border-left: 3.6px solid transparent;
15 border-right: 3.6px solid transparent;
16 border-bottom: 10.8px solid #004dff;
17 transform-origin: center 10.8px;
18}
19
20.spinner div:before,
21.spinner div:after {
22 content: '';
23 position: absolute;
24 width: 0;
25 height: 0;
26 display: block;
27 border-left: 10.8px solid transparent;
28 border-right: 10.8px solid transparent;
29 border-bottom: 7.2px solid #004dff;
30}
31
32.spinner div:before {
33 transform: translate(-10.8px, 7.2px) rotate(35deg);
34}
35
36.spinner div:after {
37 transform: translate(-10.8px, 7.2px) rotate(-35deg);
38}
39
40.spinner div:nth-child(1) {
41 transform: translate(-50%, -10.8px) rotate(51.42857deg) translate(0, 320%);
42}
43
44.spinner div:nth-child(2) {
45 transform: translate(-50%, -10.8px) rotate(102.85714deg) translate(0, 320%);
46}
47
48.spinner div:nth-child(3) {
49 transform: translate(-50%, -10.8px) rotate(154.28571deg) translate(0, 320%);
50}
51
52.spinner div:nth-child(4) {
53 transform: translate(-50%, -10.8px) rotate(205.71429deg) translate(0, 320%);
54}
55
56.spinner div:nth-child(5) {
57 transform: translate(-50%, -10.8px) rotate(257.14286deg) translate(0, 320%);
58}
59
60.spinner div:nth-child(6) {
61 transform: translate(-50%, -10.8px) rotate(308.57143deg) translate(0, 320%);
62}
63
64.spinner div:nth-child(7) {
65 transform: translate(-50%, -10.8px) rotate(360deg) translate(0, 320%);
66}
67
68@keyframes spinner-3a5251 {
69 to {
70  transform: rotate(360deg);
71 }
72}