Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
Spinkit | 17,264 | 341 | 84 | 3 years ago | 9 | October 30, 2019 | 8 | mit | CSS | |
A collection of loading indicators animated with CSS | ||||||||||
Ityped | 2,198 | 2 years ago | 12 | mit | JavaScript | |||||
Dead simple Javascript animated typing, with no dependencies. | ||||||||||
Izmir | 314 | a year ago | 2 | July 03, 2020 | mit | SCSS | ||||
Izmir - An image hover mini CSS library | ||||||||||
Leaflet.animatedmarker | 307 | 3 | 3 years ago | 1 | January 26, 2017 | 26 | mit | CSS | ||
A Leaflet plugin to animated a Marker along a polyline | ||||||||||
Term Sheets | 251 | 2 years ago | 4 | JavaScript | ||||||
Create animated terminal presentations. Export as SVG, animated GIF, or HTML+CSS | ||||||||||
Loading.css | 103 | 10 | a year ago | 4 | February 07, 2022 | 1 | mit | Stylus | ||
40+ Handcrafted CSS animations dedicated for your loaders | ||||||||||
Pure Css3 Animated Border | 55 | 6 years ago | 1 | October 29, 2017 | mit | CSS | ||||
Pure CSS3 animated border for all html element. | ||||||||||
Abeamer | 40 | 5 years ago | 35 | September 20, 2018 | other | TypeScript | ||||
frame-by-frame Web Animation framework | ||||||||||
React Animations | 29 | 6 years ago | JavaScript | |||||||
React Animations Implemented 5 ways | ||||||||||
Smoothr | 27 | 1 | 4 years ago | 35 | April 26, 2019 | mit | JavaScript | |||
A custom React router that leverages the Web Animations API and CSS animations. |
Simple loading spinners animated with CSS. See demo. SpinKit only uses (transform
and opacity
) CSS animations to create smooth and easily customizable animations.
spinkit.css
or spinkit.min.css
to your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need)spinkit.css
or examples.html
sk-center
utility class to the spinner to center it (it sets margin
to auto
)width
and height
of all spinners are set to 40px
. background-color
is set to #333
.--sk-size
(spinner width & height) and --sk-color
(spinner color). If you need broader browser support, remove the CSS variables.You can include SpinKit to your project with bower
:
$ bower install spinkit
or npm:
$ npm install spinkit
Given that you have included spinkit.min.css
in your project, these snippets will produce the different spinners:
<div class="sk-plane"></div>
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
<div class="sk-bounce">
<div class="sk-bounce-dot"></div>
<div class="sk-bounce-dot"></div>
</div>
<div class="sk-wave">
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
</div>
<div class="sk-pulse"></div>
<div class="sk-flow">
<div class="sk-flow-dot"></div>
<div class="sk-flow-dot"></div>
<div class="sk-flow-dot"></div>
</div>
<div class="sk-swing">
<div class="sk-swing-dot"></div>
<div class="sk-swing-dot"></div>
</div>
<div class="sk-circle">
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
</div>
<div class="sk-circle-fade">
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
</div>
<div class="sk-grid">
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
</div>
<div class="sk-fold">
<div class="sk-fold-cube"></div>
<div class="sk-fold-cube"></div>
<div class="sk-fold-cube"></div>
<div class="sk-fold-cube"></div>
</div>
<div class="sk-wander">
<div class="sk-wander-cube"></div>
<div class="sk-wander-cube"></div>
<div class="sk-wander-cube"></div>
</div>
SpinKit uses CSS animations and variables:
How do you know if you need to provide a fallback? You can check for animation support with Modernizr, or manually check for the animation
property, and replace the spinner with a GIF if it's not supported:
function browserSupportsCSSProperty(propertyName) {
var elm = document.createElement('div');
propertyName = propertyName.toLowerCase();
if (elm.style[propertyName] != undefined)
return true;
var propertyNameCapital = propertyName.charAt(0).toUpperCase() + propertyName.substr(1),
domPrefixes = 'Webkit Moz ms O'.split(' ');
for (var i = 0; i < domPrefixes.length; i++) {
if (elm.style[domPrefixes[i] + propertyNameCapital] != undefined)
return true;
}
return false;
}
Use it to check for animation
support:
if (!browserSupportsCSSProperty('animation')) {
// fallback…
}