CSS3的loader加載動畫

時間 2019-12-07

標籤 css3 css loader 加載動畫欄目 CSS 简体版

原文原文鏈接

純CSS3書寫的loader動畫效果，固然能夠搭配jq使用，還有react 和 Angular 版本css

瀏覽器支持

效果演示地址

純CSS版html

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

搭配 Jquery 使用react

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

下載

直接下載css3

連接：http://pan.baidu.com/s/1jIx0s4I 密碼：oxlngit

github 地址github

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

npm 安裝npm

npm i --save-dev loaders.css

Bower 安裝

bower install loaders.css

使用

一、純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"/>
  <link rel="stylesheet" type="text/css" href="../loaders.css"/>
</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>

二、搭配 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"/>
  <link rel="stylesheet" type="text/css" href="loaders.min.css"/>
</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>