1.spinner {
2  box-shadow: 0 0 0 7px #42a5f5, inset 0 0 0 1px #42a5f5;
3  position: relative;
4  height: 50px;
5  width: 230px;
6  border-radius: 8px;
7  overflow: hidden;
8  animation: rotate_5132 6s linear infinite;
9}
10
11.spinner:before {
12  display: block;
13  content: "";
14  position: absolute;
15  left: 0;
16  top: 0;
17  height: 100%;
18  background-color: #42a5f5;
19  animation: load_5123 6s linear infinite;
20}
21
22@keyframes rotate_5132 {
23  0%,
24  42% {
25    transform: rotate(0deg);
26  }
27
28  48%,
29  92% {
30    transform: rotate(180deg);
31  }
32
33  100% {
34    transform: rotate(360deg);
35  }
36}
37
38@keyframes load_5123 {
39  0% {
40    width: 0;
41  }
42
43  40%,
44  50% {
45    width: 100%;
46  }
47
48  90%,
49  100% {
50    width: 0;
51  }
52}
53