https://github.com/tobiasahlin/SpinKit

A collection of loading indicators animated with CSS
https://github.com/tobiasahlin/SpinKit

Last synced: about 1 month ago
JSON representation

A collection of loading indicators animated with CSS

• Host: GitHub
• URL: https://github.com/tobiasahlin/SpinKit
• Owner: tobiasahlin
• License: mit
• Created: 2013-12-12T23:29:41.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2020-08-01T09:04:59.000Z (over 4 years ago)
• Last Synced: 2024-10-30T04:54:44.248Z (6 months ago)
• Language: CSS
• Homepage: http://tobiasahlin.com/spinkit/
• Size: 259 KB
• Stars: 19,350
• Watchers: 450
• Forks: 1,812
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-list - SpinKit
• my-awesome-starred - tobiasahlin/SpinKit - A collection of loading indicators animated with CSS (CSS)
• awesome-javascript-cn - 官网
• awesome-loading-indicators - SpinKit - Simple loading spinners animated with CSS. (CSS)
• Awesome-CSS-Resources - SpinKit:
• awesomelist - **SpinKit**
• awesomelist - **SpinKit**
• awesome-list - SpinKit
• awesome-swedish-opensource - SpinKit
• awesome-web-animation - SpinKit - A collection of loading indicators animated with CSS. (CSS)
• awesome-frontend-libraries - spinkit
• awesome-starred - tobiasahlin/SpinKit - A collection of loading indicators animated with CSS (others)
• awesome-javascript - SpinKit - A collection of loading indicators animated with CSS - ★ 15508 (Loading Status)

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…

}

```