<div class="preloader"></div>
<div class="info">
<p>Article about this Pen:
<p><a href="https://ruslanyusupov.com/sandbox/animated-css-preloader-loading-spinner" target="_blank">https://ruslanyusupov.com/sandbox/animated-css-preloader-loading-spinner</a></p>
<p>Photo from <a href="https://www.pexels.com" target="_blank">www.pexels.com</a></p>
</div>
.preloader {
border: 15px solid gold;
border-top: 15px solid #7510f7;
border-radius: 50%;
width: 150px;
height: 150px;
animation: spinner 1.5s linear infinite;
margin: 0 auto;
}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.info {
margin-top: 100px;
}
a {
color: gold;
text-decoration: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.