1.设置radio样式
注意：radio的id要和对应的label 的for相同。
原理：使用 :checked+label 切换样式图片。checkbox也可以这么做。
css:
input[type=radio] {
float: left;
visibility: hidden;
}
label {
float: left;
width: 16px;
height: 15px;
margin: 18px 5px 0 0;
background: url(../images/arrow.png) no-repeat;
cursor: pointer;
}
.l1 {
background-position: -237px -184px;
background-size: 250px;
}
.l2 {
background-position: -236px -156px;
background-size: 250px;
}
#r1:checked + label {
background-position: -210px -184px;
}
#r2:checked + label {
background-position: -212px -156px;
}html:
<div class="male">
<input type="radio" checked="checked" name="sexlist" id="r1" />
<label for="r1" class="l1"></label>男
</div>
<div class="female">
<input type="radio" name="sexlist" id="r2" />
<label for="r2" class="l2"></label>女
</div>效果：
2.进度条样式
原理：为三个页面的进度条分别设置不同的value，由此切换背景图片。
CSS:
progress {display: block;width: 300px;height: 35px;margin-bottom:10px;-webkit-appearance:none;}
progress::-webkit-progress-bar { background: url(bg_step.png) no-repeat 0 0; }
progress::-webkit-progress-value { background: url(bg_step.png) no-repeat 0 -50px; }
progress[value="2"]::-webkit-progress-value { background-position: 0 -100px; }
progress[value="3"]::-webkit-progress-value { background-position: 0 -150px; }HTML:
<progress max="3" value="2"></progress>其中max定义完成值，value定义当前值。
效果：
CSS3+JS实现静态圆形进度条
首先，我们来一个圆（黑色）。接着，再来两个半圆，将黑色的圆遮住。（为了演示，左右两侧颜色不一样）,这时候，我们顺时针旋转右侧蓝色的半圆，下面的黑色圆就会暴露出来，比如我们旋转45度（12.5%），效果出来了。
原生JS+CSS或HTML5实现简单的进度条和滑动条效果
我们在客户端中见到的安装进度条效果以及滑块拖动效果,使用js+css都能够在页面中进行模拟,并且方法也并不复杂.我这里进行了简单的效果实现,记录一下以作巩固.
html自定义拖动进度条，包含样式和事件
将 mousedown 事件绑定在进度条的包裹层而非进度条本身，这是参考了主流视频播放器的效果后的设计，为了优化用户体验,鼠标在滚动条外的移动，本文使用 clientX 来计算
jQuery 实现一个文章阅读进度条功能
阅读进度虽然没啥具体的用处，但是我突然想起来了，随便做做也是极好的,获取元素 offset 高度、元素高度、滑动距离就能实现了
利用canvas实现环形进度条
有时候在项目中会有用到进度条的情况，使用css3也可以实现，但是对于性能不好的设备，或者网络不好的情况下，卡顿现象非常明显，避免出现不流畅的尴尬情况，所以记录一下，使用canvas来实现的方法。
在vue项目中使用Nprogress.js进度条
NProgress是一款在网页顶部添加细长进度条的工具，非常轻巧，使用起来也非常便捷，灵感来源于Google, YouTube。在路由页面跳转使用，同样在main.js中：
svg生成环形进度条
之前在项目中遇到一个环形进度条的需求，要求能实时更新进度，脑海中瞬间便蹦出css，svg，canvas3中方案，对于3种方案个人更偏向于svg，用法简单，代码量也很少，同时也便于实时控制。具体效果如下图：
js实现进度条代码
现在很多网站会用到进入网站特效，到网页没有加载完成的时候，会有一个loding特效，加载完了之后才能看到页面，今天就带着做一个js进度条效果，今天要做的效果是纯js进度条加载，没有用到框架
css进度条怎么写？
进度条经常运用于网页，即使我们意识到不是所有的东西都将瞬间被加载完成，这些进度条用于提醒使用者关于网页上具体的任务进程，譬如上传，下载，加载应用程序等。
AngularJS实现进度条功能示例
这篇文章主要介绍了AngularJS实现进度条功能,结合具体完整实例形式分析了AngularJS实现进度条功能的原理、相关知识点与注意事项,需要的朋友可以参考下
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!