纯文本Loading加载指示器特效

当前位置:主页 > jQuery库 > 文本和超链接 > 纯文本Loading加载指示器特效
纯文本Loading加载指示器特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-09-30
    阅读:
麦子学院
简要教程

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

使用方法

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

<link rel="stylesheet" href="css/spinners.css">                 
                
HTML结构

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

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

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

纯文本loading加载指示器

要想使用其它指示器效果,可以在添加第二个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

例如:

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

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

网友评论