loader.css的使用入门

2016年12月13日

loader.css的使用入门

Loaders.css是纯css的loading动画库。 Delightful and performance-focused pure css loading animations.

demo如下：

demo

安装

bower方式

bower install loaders.css

npm方式

npm i --save-dev loaders.css

使用

标准使用:

引入loaders.min.css
创建一个元素并添加动画的css类
插入适量的
到上一步创建的元素中

demo如下：

<!DOCTYPE html>
<html>
<head>
  <title>loaders css</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ConnorAtherton/loaders.css/master/loaders.min.css">

  <style type="text/css">
    .loader-demo {
      background-color: gray;
      color: blue;
      border-color: blue;
      height: 150px;
      padding-top: 50px;
      text-align: center;
      > div {
        display: inline-block;
      }
    }

    .ball-pulse > div {
      background-color: orange;
    }

  </style>
</head>
<body>
  <h3>loaders css</h3>

  <div class="loader-demo">
    <div class="ball-pulse">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</body>
</html>

另外，这个库也支持jQuery的使用，具体参考这里

定制

可改变动画图标的背景颜色

.ball-grid-pulse > div {
  background: orange;
}

浏览器兼容性

IE11
Firefox 36
Chrome 41
Safari 8

【全文完】