<h1>Pure CSS Loading Spinner Animation</h1>
<p>Runs at 60fps with zero re-paints!</p>
<div id="loading">
<p>Loading...</p>
<div id="spinner"></div>
</div>
#loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #eaa;
padding: 3em;
width: 200px;
}
@keyframes spin {
0% { transform: rotateZ(0deg); }
100% { transform: rotateZ(180deg); }
}
#spinner {
position: relative;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 25px solid #eee;
border-bottom: 25px solid #eee;
border-radius: 50%;
will-change: transform;
animation-name: spin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#spinner:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
top: -25px;
left: -25px;
border-left: 25px solid #ccc;
border-right: 25px solid #ccc;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-radius: 50%;
will-change: transform;
animation-name: spin;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.