三圆点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
posted @ 2024-11-21 11:49  东绕城  阅读(9)  评论(0编辑  收藏  举报