<style>
The processContent {
width: 100%;
Height: 25 px;
Border - the radius: 4 px;
background: red;
position: relative;
}

. ProcessBar {
height: 100%;
Width: 0;
Border - the radius: 4 px;
Background: green;
}

. Mark {
Width: 18 px;
height: 100%;
top: 0;
Border - the radius: 4 px;
Background: rebeccapurple;
position: absolute;
}
</style>
<script>
Let ct=document. GetElementsByClassName (' processContent) [0]
Let the bar=document. GetElementsByClassName (' processBar) [0]
Let mark=document. GetElementsByClassName (' mark ') [0]
Let Max=ct. The getAttribute (' Max ')/100 * ct. OffsetWidth//get the biggest progress
Let keydown=false//record mouse press
Let mark_width=mark. The offsetWidth//access to drag the button width
Bar. Style. MaxWidth=Max + 'px' maximum number calculation progress bar//
//mouse
Ct. onm ousemove=(e)=& gt; {
If (keydown) {
//minus the pull of the width, the maximum width does not exceed the maximum
Let mark_left=(e.x - mark_width)
If (mark_left & gt; Max) mark_left=Max - mark_width
Bar. Style. The width=e.x + 'px'
Mark. Style. Left=mark_left + 'px'
}
}
//mouse press
Ct. onm ousedown=(e)=& gt; {
Keydown=true
}
//mouse leave
Ct. onm ouseleave=(e)=& gt; {
Keydown=false
}
</script>



Max set maximum progress