1.spinner {
2  font-size: 28px;
3  position: relative;
4  display: inline-block;
5  width: 1em;
6  height: 1em;
7}
8
9.spinner.center {
10  position: absolute;
11  left: 0;
12  right: 0;
13  top: 0;
14  bottom: 0;
15  margin: auto;
16}
17
18.spinner .spinner-blade {
19  position: absolute;
20  left: 0.4629em;
21  bottom: 0;
22  width: 0.074em;
23  height: 0.2777em;
24  border-radius: 0.0555em;
25  background-color: transparent;
26  -webkit-transform-origin: center -0.2222em;
27  -ms-transform-origin: center -0.2222em;
28  transform-origin: center -0.2222em;
29  animation: spinner-fade9234 1s infinite linear;
30}
31
32.spinner .spinner-blade:nth-child(1) {
33  -webkit-animation-delay: 0s;
34  animation-delay: 0s;
35  -webkit-transform: rotate(0deg);
36  -ms-transform: rotate(0deg);
37  transform: rotate(0deg);
38}
39
40.spinner .spinner-blade:nth-child(2) {
41  -webkit-animation-delay: 0.083s;
42  animation-delay: 0.083s;
43  -webkit-transform: rotate(30deg);
44  -ms-transform: rotate(30deg);
45  transform: rotate(30deg);
46}
47
48.spinner .spinner-blade:nth-child(3) {
49  -webkit-animation-delay: 0.166s;
50  animation-delay: 0.166s;
51  -webkit-transform: rotate(60deg);
52  -ms-transform: rotate(60deg);
53  transform: rotate(60deg);
54}
55
56.spinner .spinner-blade:nth-child(4) {
57  -webkit-animation-delay: 0.249s;
58  animation-delay: 0.249s;
59  -webkit-transform: rotate(90deg);
60  -ms-transform: rotate(90deg);
61  transform: rotate(90deg);
62}
63
64.spinner .spinner-blade:nth-child(5) {
65  -webkit-animation-delay: 0.332s;
66  animation-delay: 0.332s;
67  -webkit-transform: rotate(120deg);
68  -ms-transform: rotate(120deg);
69  transform: rotate(120deg);
70}
71
72.spinner .spinner-blade:nth-child(6) {
73  -webkit-animation-delay: 0.415s;
74  animation-delay: 0.415s;
75  -webkit-transform: rotate(150deg);
76  -ms-transform: rotate(150deg);
77  transform: rotate(150deg);
78}
79
80.spinner .spinner-blade:nth-child(7) {
81  -webkit-animation-delay: 0.498s;
82  animation-delay: 0.498s;
83  -webkit-transform: rotate(180deg);
84  -ms-transform: rotate(180deg);
85  transform: rotate(180deg);
86}
87
88.spinner .spinner-blade:nth-child(8) {
89  -webkit-animation-delay: 0.581s;
90  animation-delay: 0.581s;
91  -webkit-transform: rotate(210deg);
92  -ms-transform: rotate(210deg);
93  transform: rotate(210deg);
94}
95
96.spinner .spinner-blade:nth-child(9) {
97  -webkit-animation-delay: 0.664s;
98  animation-delay: 0.664s;
99  -webkit-transform: rotate(240deg);
100  -ms-transform: rotate(240deg);
101  transform: rotate(240deg);
102}
103
104.spinner .spinner-blade:nth-child(10) {
105  -webkit-animation-delay: 0.747s;
106  animation-delay: 0.747s;
107  -webkit-transform: rotate(270deg);
108  -ms-transform: rotate(270deg);
109  transform: rotate(270deg);
110}
111
112.spinner .spinner-blade:nth-child(11) {
113  -webkit-animation-delay: 0.83s;
114  animation-delay: 0.83s;
115  -webkit-transform: rotate(300deg);
116  -ms-transform: rotate(300deg);
117  transform: rotate(300deg);
118}
119
120.spinner .spinner-blade:nth-child(12) {
121  -webkit-animation-delay: 0.913s;
122  animation-delay: 0.913s;
123  -webkit-transform: rotate(330deg);
124  -ms-transform: rotate(330deg);
125  transform: rotate(330deg);
126}
127
128@keyframes spinner-fade9234 {
129  0% {
130    background-color: #69717d;
131  }
132
133  100% {
134    background-color: transparent;
135  }
136}