Skip to content

Commit

Permalink
Updated readme with info on autoprefixer need
Browse files Browse the repository at this point in the history
Plus introductory information on supporting old web browsers.
  • Loading branch information
jacobsvante committed Nov 27, 2014
1 parent bec85fd commit 7dfb3cc
Showing 1 changed file with 10 additions and 0 deletions.
10 changes: 10 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ SpinKit uses CSS animations to create smooth and easily customizable animations.

## Usage

### Regular CSS

Grab the HTML and CSS for a spinner and include it in your project. Note that a hidden spinner (`opacity: 0`, or `visibility: hidden`) will still animate. After hiding a spinner, it's recommended to remove it from the DOM, set `display: none` or pause the animation by setting `animation-play-state: paused`.

SpinKit can also be installed to your project with `bower`:
Expand All @@ -14,15 +16,23 @@ SpinKit can also be installed to your project with `bower`:
$ bower install spinkit
```

### SCSS

If you're using SCSS in your project then you can include just the styles for the spinners that you want by adding the following to your main file:

```scss
@import '../bower_components/spinkit/scss/spinners/1-rotating-plane',
'../bower_components/spinkit/scss/spinners/3-wave';
```

Please note that you currently need to use [autoprefixer](https://github.com/postcss/autoprefixer) in your project if you want to support all browsers. If you're compiling your SCSS with gulp you can use [gulp-autoprefixer](https://github.com/sindresorhus/gulp-autoprefixer) or if you use grunt then [grunt-autoprefixer](https://github.com/nDmitry/grunt-autoprefixer) is a good choice.

There are some variables that can be overridden if you use SCSS. The defaults are listed in [scss/_variables.scss](https://github.com/tobiasahlin/SpinKit/blob/master/scss/_variables.scss).

## Old web browser compatibility

With support for CSS animations in every current browser and [almost 90% of all browsers in use today](http://caniuse.com/#feat=css-animation), the need for GIF and JavaScript fallbacks is decreasing quickly. If you still need to support those last few then this section is for you.

### Implementing a fallback spinner

An easy way to provide a fallback animation is to check for support for the `animation` property, and replace the spinner with a GIF if it's not supported.
Expand Down

0 comments on commit 7dfb3cc

Please sign in to comment.