# spinkit
> A collection of loading indicators animated with CSS
Latest version **2.0.1** (published 2019-10-30) · MIT license · 0 weekly downloads
## Install
```sh
npm install spinkit
pnpm add spinkit
yarn add spinkit
bun add spinkit
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: no vulnerabilities; popular repo.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.0.1 |
| Published | 2019-10-30 |
| First published | 2015-07-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 36.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19323 |
| Author | Tobias Ahlin Bjerrome |
| Maintainers | jmagnusson, tobiasahlin |
| Keywords | css, spinkit, spinner, loading, ui |
## Links
- npm: https://www.npmjs.com/package/spinkit
- Repository: https://github.com/tobiasahlin/SpinKit
- Issues: https://github.com/tobiasahlin/SpinKit/issues
- npm.io page: https://npm.io/package/spinkit
## Alternatives
- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
## Recent versions
- 2.0.1 (latest) — 2019-10-30
- 2.0.0 — 2019-10-28
- 1.2.5 — 2015-11-23
- 1.2.4 — 2015-11-23
- 1.2.3 — 2015-11-18
- 1.2.2 — 2015-08-31
- 1.2.1 — 2015-07-26
- 1.2.0 — 2015-07-20
- 1.1.0 — 2015-07-20
## README
# [SpinKit](http://tobiasahlin.com/spinkit/)
Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spinkit/). SpinKit only uses (`transform` and `opacity`) CSS animations to create smooth and easily customizable animations.
## Usage
- Add `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)
- Add a spinner to your project by copy-pasting HTML from `spinkit.css` or `examples.html`
- Add the `sk-center` utility class to the spinner to center it (it sets `margin` to `auto`)
- By default, the `width` and `height` of all spinners are set to `40px`. `background-color` is set to `#333`.
- Configure the spinner by overwriting the CSS variables, primarily `--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`:
```bash
$ bower install spinkit
```
or npm:
```bash
$ npm install spinkit
```
## Spinners
Given that you have included `spinkit.min.css` in your project, these snippets will produce the different spinners:
### Plane
```html
```
### Chase
```html
```
### Bounce
```html
```
### Wave
```html
```
### Pulse
```html
```
### Flow
```html
```
### Swing
```html
```
### Circle
```html
```
### Circle Fade
```html
```
### Grid
```html
```
### Fold
```html
```
### Wander
```html
```
## Web browser compatibility
SpinKit uses CSS animations and variables:
- CSS keyframes animations [are at +96.5% global support](http://caniuse.com/#feat=css-animation)
- CSS variables [are at +91.8% global support](https://caniuse.com/#feat=css-variables)
### Implementing a fallback spinner
How do you know if you need to provide a fallback? You can check for animation support with [Modernizr](http://modernizr.com), or manually check for the `animation` property, and replace the spinner with a GIF if it's not supported:
```javascript
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:
```javascript
if (!browserSupportsCSSProperty('animation')) {
// fallback…
}
```
---
_Source: https://npm.io/package/spinkit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._