<!-- standard loading spinner -->
<div class="spinner"></div>
<!-- Large version -->
<div class="spinner large"></div>
body {
background-color: #222;
padding-top: 20px;
}
div.spinner {
height: 21px;
width: 21px;
margin: 20px auto;
border-radius: 50%;
border: dashed 1px #D0CE03;
animation-name: loader-spin;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
&.large {
width: 43px;
height: 43px;
border-width: 3px;
}
}
@-webkit-keyframes loader-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.