HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 查看内容

纯CSS制作的进度条,加载中,等待中等特效

2016-10-11 14:10| 发布者: Hyukoh| 查看: 848| 评论: 0|原作者: webhek|来自: webhek

摘要: 纯文本,纯CSS,简单干净的加载中表示图符

  纯CSS制作的进度条,加载中,等待中等特效

  纯文本,纯CSS,简单干净的加载中表示图符


      用法

<link rel="stylesheet" href="http://tawian.io/text-spinners/spinners.css">

  or

npm install --save text-spinners

  请在目标元素上添加 aria-hidden="true" 或 role="progressbar" aria-label="Loading…" ,这样能够提供屏幕阅读的友好性。


  类型

  点点点 (缺省)

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


  点

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

  点2

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

  点3

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

  线

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

  线2

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

  加号

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

  电梯

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

  汉堡包

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

  条状

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

  条状2

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

  圆

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

  半圆

<span class="loading open-circle"></span>

  箭头

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

  三角

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

  箭头

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

  双线

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

  小球

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

  牛眼

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

  菱形

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

  鱼

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

  开关

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

  倒计时

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

  

  技术原理


  Every Spinner is a fixed sized element with a pseudo element whose content is set to the parts of the spinner divided by \A to create line breaks. Then a stepped keyframe animation shifts the pseudo element up one line-height per step.


原文作者:webhek

鲜花

握手

雷人

路过

鸡蛋
更多

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-18 03:22

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部