HTML5 implements its own progress bar and slider effects

 <div id=d> <p id=pgv>Progress: %</p> <progress id=pg max= value=></progress> </div>

Use the progress tag to set the min and max values. You can use value to get the progress value

 function staticProgress () { var pg = document.getElementById('pg') var pgv = document.getElementById('pgv') var timer = setInterval(function () { if (pg.value !== ) { pg.value++ pgv .innerHTML = 'Progress:' + pg.value + '%' } else { pgv.innerHTML = 'Loading completed' clearInterval(timer) } }, ) }

The final effect is as follows:

This display effect is for chrome browser, IE and FireFox have different styles!

Style changes:

 progress{ -webkit-appearance: none; } ::-webkit-progress-bar{ /* Get progress */ background-color: orange; /* The unfilled background color of the progress bar*/ } ::-webkit-progress -value { background-color: rgb(, , ); /* Background color of the filled part of the progress bar*/ } ::-webkit-progress-inner-element { border: px solid black; /* The inner border of the progress bar, pay attention to distinguish it from the outline*/ }

The styles here are all for the webkit kernel, and other styles are not supported~~~ The effect is as follows:

Set the input type to range. However, not all browsers support this attribute. If not, the default attribute will be returned, which is <input type=text>

(For details, please refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)

Default style:

 <div id=d> <p>H draggable slider:</p> <input type=range name=points min= max= id=hpro/> </div>

1. Comes with attributes:

 (1), defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;

Default value = (set maximum value < set minimum value)? Set the minimum value: Set the minimum value + (Set the maximum value - Set the minimum value) / 2 ---- In fact, take the middle value

We can set the value of the slider with value=7.

(2), <input type=range min=-10 max=10>

min: set the minimum value; max: set the maximum value

(3), <input type=range min=5 max=10 step=0.01>

step: Set the step value, the default is 1. If min or max is set with a decimal point, for example: max=3.14, the decimal point cannot be obtained, then you can set step to: step=any.

(4), hash marks and label:

Note: Currently, no browser fully supports the two attributes of hash marks and label. For example, Firefox does not support both, and Chrome supports hash marks but not label.

a) hash marks:

 <input type=range name=points min= max= step=any id=hpro list=tickmarks/> <datalist id=tickmarks> <option value=> <option value=> <option value=> <option value=> < option value=> <option value=> <option value=> <option value=> <option value=> <option value=> <option value=> </datalist>

b) label:

 <input type=range name=points min= max= step=any id=hpro list=tickmarks/> <datalist id=tickmarks> <option value= label=%> <option value=> <option value=> <option value => <option value=> <option value= label=%> <option value=> <option value=> <option value=> <option value=> <option value= label=%> </datalist>

(5) Autofocus can set or return whether the slider automatically gains focus. After setting it to true, the slider will be automatically locked when entering the web page. You can control it by pressing up, down, left, and right on the keyboard.

2. Appearance beautification:

 input[type=range] { outline: none; -webkit-appearance: none; /* Remove the system default appearance style, often used to remove native styles under IOS*/ border-radius: px; }

-webkit-appearance: none; Remove default styles

 input[type=range]::-webkit-slider-runnable-track { height: px; border-radius: px; box-shadow: px px #deff, inset .em .em #d; }

::-webkit-slider-runnable-track is a CSS pseudo-class element, which is not supported by all browsers. You can get the track of <input type=range>

For details, refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track

 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; /* Remove the default style of the slider*/ height: px; width: px; margin-top: -px; background:# BE; border-radius: %; border: solid .em rgba(, , , .); box-shadow: .em .em #b; }

::-webkit-slider-thumb can get the track of <input type=range>

The above is the HTML5 implementation introduced by the editor to you with its own progress bar and slider effect. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!