CSS iSpinner:纯 CSS 实现的加载图标,类似于 iOS 的 UIActivityIndicatorView

swordray · 2015年11月23日 · 最后由 swordray 回复于 2015年11月24日 · 5578 次阅读

源码:https://github.com/swordray/ispinner DEMO:http://swordray.github.io/ispinner/ 效果:

欢迎 star & fork 😄 .

12 个 spinner。。。这样说还可以做个钟了...

#1 楼 @cqcn1991 钟还简单,只有时分秒 3 个指针在转

我觉得可以用 js 动态生成 spinner-blade 的 div element , 这样就不用手动写那么多个 spinner-blade 了啊,但是这样就不是纯 css 了。还有另一种方式,可以创建一个 spinner 图标字体,就像你贴子里图片那样的,然后弄个旋转动画就可以了。其实 font awesome 里面的 spinner icon,加个旋转动画就实现这种功能了。

#3 楼 @aidewoode

1、用 slim 写就可以了

.ispinner.gray.animating
  - 12.times do
    .ispinner-blade

2、字体还要额外制作和加载字体文件,不环保

#3 楼 @aidewoode 还有这个旋转是实现不了的,spinner-blade 的位置不变,只是透明度变化

6楼 已删除
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册