设置radio样式原理：使用 :checked+label 切换样式图片。checkbox也可以这么做。进度条样式原理：为三个页面的进度条分别设置不同的value，由此切换背景图片。

这篇文章主要介绍了AngularJS实现进度条功能,结合具体完整实例形式分析了AngularJS实现进度条功能的原理、相关知识点与注意事项,需要的朋友可以参考下

现在很多网站会用到进入网站特效，到网页没有加载完成的时候，会有一个loding特效，加载完了之后才能看到页面，今天就带着做一个js进度条效果，今天要做的效果是纯js进度条加载，没有用到框架

之前在项目中遇到一个环形进度条的需求，要求能实时更新进度，脑海中瞬间便蹦出css，svg，canvas3中方案，对于3种方案个人更偏向于svg，用法简单，代码量也很少，同时也便于实时控制。具体效果如下图：

NProgress是一款在网页顶部添加细长进度条的工具，非常轻巧，使用起来也非常便捷，灵感来源于Google, YouTube。在路由页面跳转使用，同样在main.js中：

有时候在项目中会有用到进度条的情况，使用css3也可以实现，但是对于性能不好的设备，或者网络不好的情况下，卡顿现象非常明显，避免出现不流畅的尴尬情况，所以记录一下，使用canvas来实现的方法。

进度条经常运用于网页，即使我们意识到不是所有的东西都将瞬间被加载完成，这些进度条用于提醒使用者关于网页上具体的任务进程，譬如上传，下载，加载应用程序等。

阅读进度虽然没啥具体的用处，但是我突然想起来了，随便做做也是极好的,获取元素 offset 高度、元素高度、滑动距离就能实现了

将 mousedown 事件绑定在进度条的包裹层而非进度条本身，这是参考了主流视频播放器的效果后的设计，为了优化用户体验,鼠标在滚动条外的移动，本文使用 clientX 来计算

我们在客户端中见到的安装进度条效果以及滑块拖动效果,使用js+css都能够在页面中进行模拟,并且方法也并不复杂.我这里进行了简单的效果实现,记录一下以作巩固.

首先，我们来一个圆（黑色）。接着，再来两个半圆，将黑色的圆遮住。（为了演示，左右两侧颜色不一样）,这时候，我们顺时针旋转右侧蓝色的半圆，下面的黑色圆就会暴露出来，比如我们旋转45度（12.5%），效果出来了。