1.spinner {
2  position: relative;
3  width: 60px;
4  height: 60px;
5  border-radius: 50%;
6}
7
8.spinner::before,
9.spinner::after {
10  content: "";
11  position: absolute;
12  border-radius: inherit;
13}
14
15.spinner::before {
16  width: 100%;
17  height: 100%;
18  background-image: linear-gradient(0deg, #ff00cc 0%, #212121 50%);
19  animation: spin .5s infinite linear;
20}
21
22.spinner::after {
23  width: 85%;
24  height: 85%;
25  background-color: #212121;
26  top: 50%;
27  left: 50%;
28  transform: translate(-50%, -50%);
29}
30
31@keyframes spin {
32  to {
33    transform: rotate(360deg);
34  }
35}