Loaders are useful UI elements to communicate to the user something is loading in. Rather than the content loading in in dribs and drabs, a temporary full screen overlay with a centered loader can be used to disguise this and build suspense.
<div class="spinner"></div>.spinner {
position: relative;
height: 100px;
width: 100px;
margin: 0 auto;
border-radius: 50%;
display: inline-block;
border: 5px solid transparent;
border-top: 5px solid #ff6600;
animation: spin 2s linear infinite;
}
.spinner:before {
box-sizing: inherit;
position: absolute;
height: 90px;
width: 90px;
border-radius: 50%;
border: 5px solid transparent;
border-top: 5px solid #ffa600;
display: block;
content: "";
animation: spin 2.5s linear infinite;
}
.spinner:after {
box-sizing: inherit;
position: absolute;
height: 80px;
width: 80px;
top: 5px;
left: 5px;
border-radius: 50%;
border: 5px solid transparent;
border-top: 5px solid #09c;
display: block;
content: "";
animation: spin 3.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Original Article: https://baillieogrady.com/circle-loader/