三圆点CSS3 loading加载动画特效库

 

在线预览              插件下载

 

安装

可以通过npm来安装three-dots.css。

npm install three-dots --save

 使用方法

在页面中引入three-dots.css。

<link href="css/three-dots.css" rel="stylesheet">

 HTML结构

然后在你需要添加Loading效果的容器上添加相应的class类即可。

<div class="dot-elastic"></div>

 

<div class="dot-pulse"></div>

 

<div class="dot-flashing"></div>

 

<div class="dot-collision"></div>

 

<div class="dot-revolution"></div>

 

<div class="dot-translation"></div>

 

<div class="dot-typing"></div>

 

<div class="dot-windmill"></div>

 

<div class="dot-bricks"></div>

 

<div class="dot-floating"></div>

可用的class类有：

• dot-elastic
• dot-pulse
• dot-flashing
• dot-collision
• dot-revolution
• dot-carousel
• dot-typing
• dot-windmill
• dot-bricks
• dot-floating
• dot-fire
• dot-spin
• dot-falling
• dot-stretching