spinkit

2018-05-16 admin

spinkit是什么

什么是spinkit,A collection of loading indicators animated with CSS

spinkit介绍

Simple loading spinners animated with CSS. See demo. SpinKit uses hardware accelerated (translate and opacity) CSS animations to create smooth and easily customizable animations.

Usage

Regular CSS

Grab the HTML and CSS for a spinner from the example files, or add SpinKit directly to your project with bower:

or npm:

SCSS

If you’re using SCSS you can include specific spinners (rather than all of them) by importing them one by one:

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

You currently need to use an autoprefixer if you want to support all browsers. If you’re compiling your SCSS with gulp you can use gulp-autoprefixer, and grunt-autoprefixer if you use grunt.

Variables that can be overridden are listed in scss/_variables.scss.

Web browser compatibility

CSS animations are supported in the latest version of all major browsers, and browsers with animation support make up almost 90% of all usage. If you need to support IE9 and below, however, this section is for you.

Implementing a fallback spinner

How do you know if you need to provide a fallback? You can easily 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…
}

Contributing

See CONTRIBUTING.md for details.

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-32349.html

文章标题:spinkit

回到顶部