SCSS
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #DEDBD2;
> * {
margin: 5px;
}
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 100px;
background: #333;
> * {
margin: 10px;
}
}
.loader {
width: 30px;
height: 30px;
background: linear-gradient( #fccc63, #fbad50, #e95950, #cd486b, #bc2a8d, #8a3ab9, #4c68d7);
border-radius: 50%;
animation: 1s rotate infinite ease;
&:before {
position: absolute;
content: '';
width: 20px;
height: 20px;
background: #333;
border-radius: 100%;
top: 5px;
left: 5px;
}
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
.loader.medium {
width: 50px;
height: 50px;
&:before {
width: 40px;
height: 40px;
}
}
.container.two {
background: #FFF;
.loader {
&:before {
background: #FFF;
}
}
.loader.medium {
&:before {
background: #FFF;
}
}
}
