其他代码

纯文本Loading加载指示器特效

阿里云

text-spinners 是一款纯 CSS 纯文本 Loading 加载指示器特效。该 loading 加载指示器使用纯文本制作,为内联样式,不同的字体下显示的效果会略有不同。

使用方法:

在页面中引入 spinners.css 文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="css/spinners.css">

HTML 结构:

在使用时,直接使用一个内联元素,为它添加相应的 class 类即可。

  1. <button>Loading <span class="loading"></span></button>

上面的代码会在按钮上添加默认的“Ellip”效果。

要想使用其它指示器效果,可以在添加第二个 class 效果类。可用的 class 类有:

Ellip (默认)

Dots

Dots2

Dots3

Line

Line2

Plus

Lifting

Hamburger

Bar

Bar2

Circle

Open-circle

Arrow

Triangle

Triangles

Beam

Bullet

Bullseye

Rhomb

Fish

Toggle

Countdown

Time

Hearts

Earth

Moon

Monkey

Words

例如:

  1. <span class="loading dots"></span>

text-spinners 纯文本 loading 指示器特效的 github 地址为:https://github.com/tawian/text-spinners

纯文本 Loading 加载指示器特效

已有 432 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!