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

swordray · November 23, 2015 · Last by swordray replied at November 24, 2015 · 7505 hits

源码: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 Floor has deleted
You need to Sign in before reply, if you don't have an account, please Sign up first.