CSS3实现圆环式百分比

早前尝试实现过实现一个缺口圆环loading,我们来回顾一下:

 

See the Pen XmNdVy by cloudstone (@cloudstone) on CodePen.


 

主要使用了CSS3的border-radius、transform:rotate、transform-origin,以及白色长矩形的遮挡。 前两天偶然又看到了一个百分比的圆环式表示法,好奇,研究之。用chrome开发者工具摆弄了一番,终于明白其原理,但还是觉得它的实现过于繁琐,自己重新实现了一番,这是jquery版:

 

See the Pen Mabyzq by cloudstone (@cloudstone) on CodePen.


 

再看Angular版:

 

See the Pen YypWvr by cloudstone (@cloudstone) on CodePen.


 

LESS是一样的,但js明显要简练的多。 而且,在实现jquery版本时,也花了更多时间去调试,由此可见,操作DOM需要维护更多的状态,稍有不慎就会造成疏漏。虽然angular的双向绑定很强大,在简单场景下会事半功倍,但是在复杂场景下,有时定位问题显得力不从心,需要对Angular框架本身非常精通才可准确定位问题。由此引申出React+Flux的思想精髓,单向数据流肯定是会简化问题的,虽然从代码量上可能会比双向绑定多一点,但从长久来看,它将更有利于团队的发展。