Html
    Css
    Js

    
                        
body {
	background-color:#d9d9d9;
}
.loadeBox {
	position:absolute;
	background-color:white;
	width:500px;
	height:40px;
}
.bar {
	width:200px;
	height:1px;
	background-color:black;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:10%;
	transform:translate(0,-50%);
	/* left:200px;
	*/
}
.radio {
	width:0px;
	height:0px;
	border-radius:50%;
	background-color:rgb(77,224,224);
	position:absolute;
	/* left:-2.5px;
	*/
}
.bigRadio {
	width:10px;
	height:10px;
	background-color:rgba(165,116,116,0.5);
	border-radius:50%;
	position:absolute;
	top:-4.5px;
	left:-5px;
}
.loading {
	height:1px;
	background-color:royalblue;
	position:absolute;
	top:0;
	left:0;
}
.title {
	width:40px;
	height:20px;
	background-color:rgb(165,116,116);
	position:absolute;
	top:50%;
	right:0;
	transform:translate(0,-50%);
	line-height:20px;
	text-align:center;
	color:black;
	font-size:12px;
}

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

jQuery可拖动进度条代码 (原创)

更新时间:2021-02-21 01:52:12

简单使用,只需要拖动鼠标即可; 整体使用了loadeBox的DIV包裹,可以随意定位,随意调整大小。

0