Html
    Css
    Js

    
                        
.img-36 {
	width:36px;
}
.mC-bar-box {
	height:56px;
	margin:0 24px;
}
.mC-bar-tips {
	padding-left:5px;
}
.mC-bar-tips-word {
	text-align:center;
	width:46px;
	height:20px;
	color:#FFF;
	font-size:12px;
	animation:tipsMove 2s linear;
}
@keyframes tipsMove {
	0% {
	margin-left:0%;
}
}.mC-bar-tips1 {
	background:url("http://www.jq22.com/img/cs/500x300-1.png") no-repeat;
	background-size:100%;
}
.mC-bar-tips2 {
	background:url("http://www.jq22.com/img/cs/500x300-2.png") no-repeat;
	background-size:100%;
}
.mC-bar-tips3 {
	background:url("http://www.jq22.com/img/cs/500x300-3.png") no-repeat;
	background-size:100%;
}
.mC-bar-tips4 {
	background:url("http://www.jq22.com/img/cs/500x300-4.png") no-repeat;
	background-size:100%;
}
.mC-bar-l-img {
	position:absolute;
	z-index:2;
}
.mC-bar-r-img {
	position:absolute;
	right:24px;
}
.mC-bg-bar {
	height:5px;
	border-radius:5px;
	width:calc(100% - 100px);
	margin-top:12px;
	position:absolute;
	margin-left:26px;
}
.mC-bg-bar1 {
	background-color:#fbdfdf;
}
.mC-bg-bar2 {
	background-color:#dadbe4;
}
.mC-bg-bar3 {
	background-color:#fee9cc;
}
.mC-bg-bar4 {
	background-color:#ede0ff;
}
.mC-bar {
	width:0%;
	height:5px;
	border-radius:5px;
	animation:move 2s linear;
}
.mC-bar1 {
	background:#e22728;
	background:-webkit-linear-gradient(left,#e22728,#ec7f00);
	/* Safari 5.1 - 6.0 */
  	background:-o-linear-gradient(left,#e22728,#ec7f00);
	/* Opera 11.1 - 12.0 */
  	background:-moz-linear-gradient(left,#e22728,#ec7f00);
	/* Firefox 3.6 - 15 */
  	background:linear-gradient(left,#e22728,#ec7f00);
	/* 标准的语法 */
}
.mC-bar2 {
	background:#d94900;
	background:-webkit-linear-gradient(left,#d94900,#8487a4);
	/* Safari 5.1 - 6.0 */
  	background:-o-linear-gradient(left,#d94900,#8487a4);
	/* Opera 11.1 - 12.0 */
  	background:-moz-linear-gradient(left,#d94900,#8487a4);
	/* Firefox 3.6 - 15 */
  	background:linear-gradient(left,#d94900,#8487a4);
	/* 标准的语法 */
}
.mC-bar3 {
	background:#8487a4;
	background:-webkit-linear-gradient(left,#8487a4,#fc9300);
	/* Safari 5.1 - 6.0 */
  	background:-o-linear-gradient(left,#8487a4,#fc9300);
	/* Opera 11.1 - 12.0 */
  	background:-moz-linear-gradient(left,#8487a4,#fc9300);
	/* Firefox 3.6 - 15 */
  	background:linear-gradient(left,#8487a4,#fc9300);
	/* 标准的语法 */
}
.mC-bar4 {
	background:#fc9300;
	background:-webkit-linear-gradient(left,#fc9300,#a766ff);
	/* Safari 5.1 - 6.0 */
  	background:-o-linear-gradient(left,#fc9300,#a766ff);
	/* Opera 11.1 - 12.0 */
  	background:-moz-linear-gradient(left,#fc9300,#a766ff);
	/* Firefox 3.6 - 15 */
  	background:linear-gradient(left,#fc9300,#a766ff);
	/* 标准的语法 */
}
@keyframes move {
	0% {
	width:0%;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.8.3
 立即下载

炫酷的进度条(原创)

发布时间:2019-07-04 22:37:32

var classnum = 3; //属于哪个阶段 1-4
var classnum1 = classnum + 1; //1 是铜星 2 是银星 3 是金星  4 是钻星
var barwidth = 50; //值在这个阶段的百分比

可以根据需求不同换掉不同的图片

0