当先锋百科网

首页 1 2 3 4 5 6 7

CSS3的loader加载动画

纯CSS3书写的loader动画效果，当然可以搭配jq使用，还有react 和 Angular 版本

浏览器支持

效果演示地址

image

  • 纯CSS版

演示地址：http://weber.pub/demo/160912/css.html

  • 搭配 Jquery 使用

演示地址：http://weber.pub/demo/160912/jq.html

下载

  • 直接下载

链接：http://pan.baidu.com/s/1jIx0s4I 密码：oxln

  • github 地址

github 地址：https://github.com/ConnorAtherton/loaders.css

  • npm 安装

npm i --save-dev loaders.css

  • Bower 安装

bower install loaders.css

使用

1、纯css3版本

  • 引入 loaders.min.css

  • 创建元素并添加 class

<div class="loader-inner ball-pulse"></div>

  • 在创建的元素中插入适当的 div

演示地址：http://weber.pub/demo/160912/css.html

<!DOCTYPE html5>
<head>
  <link rel="stylesheet" type="text/css" href="demo.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" />
  <link rel="stylesheet" type="text/css" href="../loaders.css" target="_blank" rel="external nofollow" />
</head>
<body>
  <main>
    <div class="loaders">
      <div class="loader">
        <div class="loader-inner ball-pulse">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </main>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('main').className += 'loaded';
    });
  </script>
</body>

2、搭配 Jquery 使用

  • 引入 loaders.min.css Jquery 和 loaders.css.js

  • 创建元素并添加 class

<div class="loader-inner ball-pulse"></div>

  • loaders.css.js 会自动根据class 创建对应数量的 div

  • loaders.css.js 调用

$('.loader-inner').loaders()

演示地址：http://weber.pub/demo/160912/jq.html

<!DOCTYPE html5>
<head>
  <link rel="stylesheet" type="text/css" href="demo.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" />
  <link rel="stylesheet" type="text/css" href="loaders.min.css" target="_blank" rel="external nofollow" />
</head>
<body>
  <main>
    <div class="loader-inner ball-pulse"></div>
  </main>
  <script src="jquery-2.1.1.min.js"></script>
  <script src="loaders.css.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('main').className += 'loaded';
    });
    $('.loader-inner').loaders()
  </script>
</body>

结尾

  • react 版本

react 版本github地址

  • angular 版本

angular 版本github地址

by Weber.pub

本文地址：http://weber.pub/CSS3的loader加载动画/193.html