1@keyframes spin {
2  from {
3    transform: rotate(0);
4  }
5
6  to {
7    transform: rotate(359deg);
8  }
9}
10
11@keyframes spin3D {
12  from {
13    transform: rotate3d(.5,.5,.5, 360deg);
14  }
15
16  to {
17    transform: rotate3d(0deg);
18  }
19}
20
21@keyframes configure-clockwise {
22  0% {
23    transform: rotate(0);
24  }
25
26  25% {
27    transform: rotate(90deg);
28  }
29
30  50% {
31    transform: rotate(180deg);
32  }
33
34  75% {
35    transform: rotate(270deg);
36  }
37
38  100% {
39    transform: rotate(360deg);
40  }
41}
42
43@keyframes configure-xclockwise {
44  0% {
45    transform: rotate(45deg);
46  }
47
48  25% {
49    transform: rotate(-45deg);
50  }
51
52  50% {
53    transform: rotate(-135deg);
54  }
55
56  75% {
57    transform: rotate(-225deg);
58  }
59
60  100% {
61    transform: rotate(-315deg);
62  }
63}
64
65@keyframes pulse {
66  from {
67    opacity: 1;
68    transform: scale(1);
69  }
70
71  to {
72    opacity: .25;
73    transform: scale(.75);
74  }
75}
76
77.circle-border {
78  width: 150px;
79  height: 150px;
80  padding: 3px;
81  display: flex;
82  justify-content: center;
83  align-items: center;
84  border-radius: 50%;
85  background: rgb(63,249,220);
86  background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgb(5, 255, 138) 100%);
87  animation: spin .8s linear 0s infinite;
88}
89
90.circle-core {
91  width: 100%;
92  height: 100%;
93  background-color: #04090e00;
94  border-radius: 50%;
95}
96