像这样的圆环进度图形，如果纯用 CSS 来实现，大家有什么好思路么？

[Livid]

http://dribbble.com/shots/629733-App-UI-elements?list=following

[zythum]

这个。必须有个canvas.. 不然真没办法做出个扇形...

[cutehalo]

这个 http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/ ？

[cutehalo]

or 这个 http://attasi.com/labs/volume/ ？

[benzhe]

http://nipponcolors.com 打开右侧的 On 后，左侧的颜色环在切换颜色的时候会有 CSS 动画

[Mak]

用 transform: matrix(......); 可以畫一個一角指向圓心的菱形，然後圓外面到部分用遮罩蓋起來就可以了。

麻煩的是遮罩層的邊框必須用圖片才能實現最外面哪個上黑下白漸變的「圓邊框」。

[zythum]

@benzhe 我懂了。用蒙板加旋转，还要做成左右两边的。等下有空做个demo

[zythum]

突然一想，貌似不用蒙板也能做。 吃完饭做个demo

[zythum]

@Mak 这个办法不好。只能做凸多边型，如果大于180度就不行了。

[benzhe]

@Mak 可以用 radial-gradient

[yqrm]

@cutehalo http://tutorialzine.com/ 这个站很不错，收藏了，感谢

[zythum]

radial-gradient 是做圆心向外这么个方向的渐变是做不错扇形的。

[bitsmix]

http://widgets.better2web.com/loader/

[911]

http://anthonyterrien.com/knob/

[houkanshan]

try this？
http://liumiao.me/html/wd/W3C/262.html
css3 + js

[zythum]

@houkanshan 和我实现实现的方式类似。但是用两个拼的话css transition怎么做过度呢。只能用js setTimeout或者祯动画做过度了

[houkanshan]

@zythum 嗯，原作者就是setTimeout过度的，实际上他的rotate都是setInterval控制的。。。
如果能用帧动画就更好了

[benzhe]

@zythum 抱歉误解了 @Mak 的意思，不过 border 的问题可以用 line-gradient 的 background 和 border-radius 解决。
我也尝试在做 DEMO, 不过卡住了，因为发现进度条首尾也有小渐变，看来不用图片不行了？

[endintro]

http://css-tricks.com/examples/ShapesOfCSS/ 里的Pac-Man + css3 transform rotate？

[zythum]

http://zythum.free.bg/circlerange/

纯css实现了,没图片，没用canvas。但是没做过度动画。等下整理下做个以后可以扩展的

[zythum]

@benzhe 可以不通图片的。你看下我写的demo就可以了。
@houkanshan 看看能不能做个大小可以自适应的样式