Simple progress bar and slider effects using native JS+CSS or HTML5

A,

Summary: Animation is used for progress bar animation and setIntelval is used for automatic effects

2. Use native JS+CSS or HTML5 to achieve simple progress bar and slider effects

preface

I personally like the js + CSS strong performance ability, this is one reason I like front-end developer, the backend is usually in dealing with data, a lot of things are abstract data structure, not intuitive also not beautiful, but the front view focuses on the interface of rendering and all sorts of interesting interaction effect, which as we see in our client installation progress bar Results and slider drag effects can be simulated in a page using JS + CSS, and the method is not complicated. I’ve done a simple implementation here, so I’ll write it down for consolidation.

1. Progress bar effect is achieved

Effect display:

Basic idea:

The animation effect of CSS3 is mainly used here. The progress bar is set to an element with an initial width of 0, a green background color and the same height as the container. Animation is used to animate the width of the element to achieve the filling effect of the progress bar.

The following code implementation can be used as a reference:

html:

<! <div id="wrapper"> <! <div id="progressbar"> <! - used to imitate the progress bar promoting effect of the progress bar element -- -- > < div id = "fill" > < / div > < / div > < / div >Copy the code

css:

#wrapper{ position: relative; width:200px; height:100px; border:1px solid darkgray; } #progressbar{ position: absolute; top:50%; left:50%; margin-left:-90px; margin-top:-10px; width:180px; height:20px; border:1px solid darkgray; } #fill{animation: move 2s; text-align: center; background-color: #6caf00; } @keyframes move {0%{width:0; } 100%{ width:100%; }}Copy the code

js:

init:function(){ var fill=document.getElementById('fill'); var count=0; Var timer=setInterval(function(e){count++; var timer=setInterval(function(e){count++; fill.innerHTML=count+'%'; if(count===100) clearInterval(timer); }, 17); }}; progressbar.init();Copy the code

HTML5 implementation:

The powerful HTML5 provides a new tag, just through the tag + simple JS, that can achieve progress bar scrolling effect.

The code is as follows:

HTML

<progress max="100" value="0" id="pg"></progress>

The meaning of this label is very clear, and there are only two attributes above: Max represents the amount of tasks to be completed, and value represents the amount of tasks currently completed.

js

var pg=document.getElementById('pg'); setInterval(function(e){ if(pg.value! =100) pg.value++; else pg.value=0; }, 100);Copy the code

The above implementation method is not only more semantic, but also greatly simplifies our code, and more flexible, so skilled use of HTML5 is very necessary!

However, the browser compatibility of HTML5 tags is also an issue that we need to consider, so if the compatibility of web pages is relatively high, especially for the earlier version of IE, then the HTML5 tag is not suitable. The following is the browser support.

2. Slider effect realization

Effect display:

Basic idea:

In fact, the slider is the progress of the progress bar, the progress bar is to automatically fill the entire container, the slider is to achieve self-controlled filling effect.

The whole slider is mainly divided into three parts, namely, slider container, slider, filling block.

Here I mainly implemented two functions:

1. Click any part of the slider to automatically adjust the position of the slider and adjust the filling situation

2. Drag the slider to adjust the filling

The implementation of the first function is very simple, first set the slider to absolute position, then just bind the click event in the slider area, then read the offsetX property of the mouse event, determine the distance of the mouse position relative to the left of the slider, then set the left of the slider to adjust the position of the slider and the width of the fill block.

The realization of the function of the second slightly more complicated, because to simulate the effect of a drag and drop, is used here to three mouse events mousedown, mousemove, mouseup.

1. When we hold down the slider, the mouseDown event is triggered. We don’t need to do much in this event processing, just change the state of the slider from never allow drag to allow drag.

2. Then trigger the Mousemove to move the slider and fill with the mouse.

3. When the mouse is released, the mouseup event is triggered to change the slider from dragging allowed to dragging not allowed.

The following code implementation can be used as a reference:

html:

<! <div id="wrapper"> <! <div id="fill"></div> <! Id ="slider"></div> </div>Copy the code

css:

#wrapper{ position: relative; width:200px; height:20px; border:1px solid darkgray; } /* Set the slider and fill block to inline-block and make sure they are in the same line */ #slider{position: absolute; left:0; width:20px; height:20px; display: inline-block; background-color: #af58a8; cursor:pointer; } #fill{ display: inline-block; width:0; height:20px; background: #6caf00; }Copy the code

js:

var slider=(function(){ init=function(){ var wrapper=document.getElementById('wrapper'); var slider=document.getElementById('slider'); var fill=document.getElementById('fill'); move(wrapper,slider,fill); }; Move =function(dom1,dom2,dom3){var drag=0; Dom1.addeventlistener ('click',function (e) {if(e.target===dom2){// Click the slider and do nothing by itself  }else{ if(e.offsetX>180) { dom2.style.left='180px'; dom3.style.width='180px'; }else if(e.offsetX<20){ dom2.style.left='0px'; dom3.style.width='0px'; }else{ dom2.style.left=e.offsetX-10+'px'; dom3.style.width=e.offsetX-10+'px'; }}}); Dom2. addEventListener('mousedown',function(){drag=1; }); / / release button bindings in the document, ensure that the entire page container release button anywhere can modify the state of the computer document. The addEventListener (" mouseup ", function () {drag = 0; }); Dom1.addeventlistener ('mousemove',function(e){if(drag==1){// If (drag==1){ if(e.pageX>189) { dom2.style.left='180px'; dom3.style.width='180px'; }else if(e.pageX<29){ dom2.style.left='0px'; dom3.style.width='0px'; }else{ dom2.style.left=e.pageX-19+'px'; dom3.style.width=e.pageX-19+'px'; }}}); }; return { init:init } })(); slider.init();Copy the code

HTML5 implementation:

Now that the progress bar has a dedicated tag under HTML5, what about the slider bar? Through the query, it is found that although there is no label set for the slider, HTML5 adds a value range in the type attribute of the input, which is exactly what we need. See input is not limited to providing input fields, it can implement a very rich variety of controls, many of which can be found in input.

The control looks like this:

The code is as follows:

html

<input type="range" name="points" min="1" max="10" />
Copy the code

You don’t even need JS to control it, just one line of HTML code to achieve the full slider effect.

The tutorial for using this property is as follows:

Range attributes of the method of use: www.w3school.com.cn/html5/html_…

On how to operate the range element in js: www.w3school.com.cn/jsref/dom_o… If you think it’s good, please like, bookmark and forward ❤❤❤~

You can get PDF book source code, tutorials, etc., for everyone to use free click the link to join [Web front-end technology] : link.zhihu.com/?target=htt…