注册登录

CSS3 loading三圆点加载动画特效

three-dots.css是一款CSS3 loading三圆点加载动画特效库。three-dots.css中集成了14种三圆点loading动画特效，以及三种增强动画效果。

查看演示 下载源码

安装

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

npm install three-dots --save
知识兔

使用方法

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

<link href="https://zhishitu.com" 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

该CSS3 loading三圆点加载动画特效的github地址为：https://github.com/nzbin/three-dots

计算机