<div class="hloader"></div>
body {
padding: 20px;
background-color: #121212;
}
.hloader {
--hloader-color: #e96900;
--hloader-size: 80px;
--hloader-weight: 8px;
--hloader-duration: 1s;
width: var(--hloader-size);
height: var(--hloader-size);
color: var(--hloader-color);
border: var(--hloader-weight) solid;
border-top-color: transparent;
border-radius: 50%;
animation: hloader var(--hloader-duration) infinite linear;
}
@keyframes hloader {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.