/** CSS **/
body {
background: #225;
}
.loader:before, .loader:after {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
border-style: solid;
border-top-color: #5C5470;
border-right-color: #FE7187;
border-bottom-color: #45A298;
border-left-color: #C6394D;
content: '';
transform: translate(-50%, -50%);
animation: rotate 2s infinite ease-in-out;
}
.loader:before {
border-width: 20vh;
}
.loader:after {
width: 30vh;
height: 30vh;
border-width: 2.5vh;
animation-direction: reverse;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
Simple rotate loader
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.