Loader by terenceodonoghue

1.container {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  border-radius: 50%;
6  height: 96px;
7  width: 96px;
8  animation: rotate_3922 1.2s linear infinite;
9  background-color: #9b59b6;
10  background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
11}
12
13.container span {
14  position: absolute;
15  border-radius: 50%;
16  height: 100%;
17  width: 100%;
18  background-color: #9b59b6;
19  background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
20}
21
22.container span:nth-of-type(1) {
23  filter: blur(5px);
24}
25
26.container span:nth-of-type(2) {
27  filter: blur(10px);
28}
29
30.container span:nth-of-type(3) {
31  filter: blur(25px);
32}
33
34.container span:nth-of-type(4) {
35  filter: blur(50px);
36}
37
38.container::after {
39  content: "";
40  position: absolute;
41  top: 10px;
42  left: 10px;
43  right: 10px;
44  bottom: 10px;
45  background-color: #fff;
46  border: solid 5px #ffffff;
47  border-radius: 50%;
48}
49
50@keyframes rotate_3922 {
51  from {
52    transform: translate(-50%, -50%) rotate(0deg);
53  }
54
55  to {
56    transform: translate(-50%, -50%) rotate(360deg);
57  }
58}
59