Learning | CSS3 Implementing progress bar loading

Progress bar loading is an interactive effect of page loading, which is designed to improve the user experience.

The implementation of the progress bar is divided into 3 parts: 1, page layout, 2, progress bar dynamic, 3, when the progress bar increased.

File directory

Load file Order

<link rel= "stylesheet/less" href= "./index.less" ><script src= "./zepto.min.js" ></script>< Script src= "./less.js" ></script><script src= "./rem.js" ></script>

Index.less is a style file

Zepto is the library that is introduced

Less.js is compiled for less

Rem.js is mobile-screen adaptive

Achieve results

1. Page layout

Page layout with position layout, progress Bar Center, CSS using less, layout style for mobile, using REM units.

Html

class="loadingbox">        class="progress" >            class="run"></div>        </div></ Section>

Less

Html,body{Height:100%;}. Loadingbox{background:#000000;Height:100%;Overflow:Hidden;position:relative;Display:None;. progress{@w:4.6;@h:. 3;position:Absolute;width:Unit (@w,rem);Height:Unit (@h,rem);Top:50%; Left:50%;Margin-left:unit ([email protected]/2,rem);Margin-top:Unit (([email PROTECTED]/2) +1, REM);background:#fff;Border-radius:Unit (@h/2,rem);. run{position:Absolute;Top:0; Left:0;width:0;Height:unit (@h, REM);//Start color and end color are consistent with no gradient effect transition:. 3s;background:-webkit-linear-gradient (left bottom, #5cd85c 0, #5cd85c 25%, #74c274 25%, #74c274 50%, #5cd85c 50%, #5cd85c 75%,# 74c274 75%, #74c274 100%);background:Linear-gradient (left bottom, #5cd85c 0, #5cd85c 25%, #74c274 25%, #74c274 50%, #5cd85c 50%, #5cd85c 75%, #74c274 75%,# 74c274 100%);background-size:unit (@h, REM) unit (@h, REM);//From the top down to achieve the effect of moving. -webkit-border-radius:unit (@h/2, REM);Border-radius:unit (@h/2, REM);//loadingmove 1s linear infinite both stop at the last frame-webkit-animation:loadingmove. 8s Linear Infinite both;Animation:loadingmove. 8s Linear Infinite both; }}}@-webkit-keyframes Loadingmove{0%{background-position:0 0; }100%{background-position:0-.3rem; }} @keyframes loadingmove{0%{background-position:0 0; }100%{background-position:0-.3rem; }}

So here's the problem. The progress bar has an upward ripple, how the ripple is realized, how the ripple is moving, and what the principle of the two issues is

2, progress bar dynamic ripple is how to achieve

Ripple implementation used to the background linear-gradient 0-25% is a color, 25%-50% is a color, 50%-75% is a color, 75%-100% is a color, so that it does not repeat default is repeat, Fully populate the progress bar length and width, the code is as follows

Background:linear-gradient (left Bottom, #5cd85c 0, #5cd85c 25%, #74c274 25%, #74c274 50%, #5cd85c 50%, #5cd85c 75%, #74c274 75%, #74c274 100%);

How the ripples are moving.

Moved to use the CSS in the animation, so that the progress bar background from the top down, you can achieve the effect of the motion, then how to achieve from the top down? The answer is to use CSS3 's animation keyframes,0% is to let it position 0 0 100% when it position 0-.3rem. -.3rem is the height of the progress bar, the code is as follows, Loadingmove is the frame function,. 8s is the duration 0.8s,linear is a linear change, infinite is infinite repetition, and both is each loop stops at the last frames.

Animation:loadingmove. 8s linear  infinite both;

Loadingmove

@keyframes Loadingmove {    0%{        background-position: 0 0;    }     100%{        background-position: 0-.3rem;    } }

3. When the progress bar increases

It is well known that the most expensive time on the page is the picture, then you can load a picture, let Count plus 1, then load N and divided by the total number of pictures is the loading progress, loading progress. The logic in the code is to traverse each picture, wait for each picture to load, Count plus 1, and change the width of the progress bar to achieve a real-time loading effect.

Let Loadingrender = (function() {Let $loadingBox= $ (". Loadingbox"), $run= $loadingBox. Find (". Run"); //Calculate picture Loading ProgressLet Imglist =["./1.png", "./2.png", "./3.png", "./4.png"]; Let Total=imglist.length, cur= 0; Let computed=function() {Imglist.foreach (function(item) {Let tempimg=NewImage (); TEMPIMG.SRC=item; Tempimg.onload=function() {cur++;                RUNFN (); Tempimg=NULL; }})} Let Runfn=function() {$run. css ("width", (cur/total) *100+ "%");if(cur>=Total ) {            //The time node of the next area enteredLet delay = setTimeout (function() {cleartimeout (delay); },1500)        }    }    return{init:function() {$loadingBox. css ("Display", "block");        Computed (); }}) (); Loadingrender.init ();

Where Runfn is the function of increasing the width, with the settimeout, the purpose is to delay a load, let the load a bit of rhythm, the same, CSS transition:. 3s; also for the load to be rhythmic.

Learning | CSS3 Implementing progress bar loading