Html
<div class= "Progress" > <div class= "PROGRESS_BG" > <div class= "Progress_bar" ></div> </div> <div class= "progress_btn" ></div> <div class= "text" >0%</div> </div>
Css
. progress{position:relative; width:300px;margin:100px Auto;} . progress_bg{height:10px, border:1px solid #ddd; border-radius:5px; Overflow:hidden;background-color: #f2f2f2;} . Progress_bar{background: #5FB878; width:0; height:10px; border-radius:5px;} . progress_btn{width:20px, height:20px, border-radius:5px, Position:absolute;background: #fff; left:0px; Margin-left: -10px; top:-5px; cursor:pointer;border:1px #ddd Solid;box-sizing:border-box;} . Progress_btn:hover{border-color: #F7B824;}
Js
$ (function () {var tag = False,ox = 0,left = 0,bgleft = 0; $ ('. Progress_btn '). MouseDown (function (e) {ox = E.pagex-left; Tag = true; }); $ (document). MouseUp (function () {tag = false; }); $ ('. Progress '). MouseMove (function (e) {//mouse move if (tag) {left = E.pagex-ox; if (left <= 0) {left = 0; }else if (left >) {left = 300; } $ ('. Progress_btn '). CSS (' left ', left); $ ('. Progress_bar '). width (left); $ ('. Text '). HTML (parseint ((left/300) *100) + '% '); } }); $ ('. Progress_bg '). Click (function (e) {//mouse click if (!tag) {Bgleft= $ ('. Progress_bg '). Offset (). Left; left = E.pagex-bgleft; if (left <= 0) {left = 0; }else if (left >) {left = 300; } $ ('. Progress_btn '). CSS (' left ', left); $ ('. Progress_bar '). Animate ({width:left},300); $ ('. Text '). HTML (parseint ((left/300) *100) + '% '); } }); });
:
jquery implements a draggable progress bar