CSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #444;
}
div {
border: 1px solid transparent;
border-radius: 100%;
box-shadow: -50px 0 0 8px #3498db,
-25px 25px 0 8px #1abc9c,
0px 50px 0 8px #9b59b6,
25px 25px 0 8px #f1c40f,
50px 0 0 8px #e67e22,
25px -25px 0 8px #e74c3c,
0px -50px 0 8px #ecf0f1,
-25px -25px 0 8px #99a;
animation: rotate 0.4s ease-in-out infinite;
}
@keyframes rotate {
100% {
box-shadow: -25px 25px 0 8px #1abc9c,
0px 50px 0 8px #9b59b6,
25px 25px 0 8px #f1c40f,
50px 0 0 8px #e67e22,
25px -25px 0 8px #e74c3c,
0px -50px 0 8px #ecf0f1,
-25px -25px 0 8px #99a,
-50px 0 0 8px #3498db;
}
}
