CSS Animation (360deg Rotate)

						.code-container {
    width: 450px;
    max-width: 100%;
    padding: 50px 10px;
    box-shadow: 0px 0px 10px #0000000d;
    border-radius: 10px;
    row-gap: 10px;
    display: flex;
    flex-wrap: wrap;
}
.box-circle {
    min-width: 300px;
    min-height: 300px;
    border-radius: 50%;
    position: relative;
    animation: rotate 6s infinite linear;
    margin: auto;
    box-shadow: 0px 0px 10px 10px #00000014;
}
@keyframes rotate {
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
}
.column-bar {
    width: 30px;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgb(255 204 204) 55%, rgba(0,0,0,0) 50%);
}
@keyframes rotate2 {
	0%{transform: translateY(0px)}
	50%{transform: translateY(50px)}
	100%{transform: translateY(0px)}
}
.column-bar .dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    animation: rotate2 0.6s infinite linear;
    box-shadow: inset 0px 0px 9px 5px #0000002e;
}

					

						let columnBar = ''
let dotColors = ['#b3c100', '#ced2cc', '#ac3e31', '#7e909a', '#1c4e80', '#4cb5f5', '#dbae58', '#ea6a47', '#d32d41', '#6ab187']

//Add column bar
for(let i = 0; i < 10; i++){
	columnBar += '<div class="column-bar"><div class="dot"></div></div>'
}
document.querySelector(".box-circle").insertAdjacentHTML('afterbegin', columnBar)

//Add style in dots and column bar
let bars = document.querySelectorAll(".column-bar")
for(let i = 0; i < bars.length; i++){
	bars[i].style.transform = 'translate(-50%, -50%) rotate('+i*36+'deg)';
	bars[i].style.animationDelay = 0.4 * i + 's';
	bars[i].querySelector(".dot").style.backgroundColor = dotColors[i];
	bars[i].querySelector(".dot").style.animationDelay = 0.2 * i + 's';
}