CSS3的loader載入動畫
阿新 • • 發佈：2019-01-09
純CSS3書寫的loader動畫效果，當然可以搭配jq使用，還有react 和 Angular 版本
瀏覽器支援
效果演示地址
下載
- 直接下載
- github 地址
- 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
<!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"> 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()<!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>結尾
- react 版本
- angular 版本