Yet Another CSS 3 Spinner – as if there wouldn't be enough of them.
From mindrevolution. Maintained by Marc Stöcker.
My co-workers sometimes hit me up with the question for a "simple spinner, CSS only possibly". To safe me some time, I created this tiny repo, so I can just refer them to it. Job done, time saved.
Click here for a working demo page.
<div class="spinner"></div>
.spinner {
border: 10px double rgba(255, 204, 0, 0.2);
border-top: 10px double rgba(255, 204, 0, 0.8);
border-radius: 100%;
-webkit-animation: rotation 0.7s infinite linear;
-moz-animation: rotation 0.7s infinite linear;
-o-animation: rotation 0.7s infinite linear;
animation: rotation 0.7s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
/* see './css/yacts.css' for complete CSS */
It's all in the /css/ directory, though there isn't any use of LESS yet. Probably a good starting point for extending it with i.e. color variables?
YACTS is released under the MIT license: opensource.org/licenses/MIT
This project is open for collaboration. Fork. Push. Innovate.