HTML5 CSS3 attractive example: Implementation of the webpage loading progress bar, download progress bar, etc.

Today, we will bring you a dazzling progress bar. The progress bar will give you a good experience in a time-consuming operation and will not make you feel that you are waiting blindly. For long waits without progress bars, the user crashes the task and does not hesitate to close the application. It is generally used to download tasks, delete a large number of tasks, and load webpages. If html5 is used for mobile phone layout, it can also be used in mobile phones ~

:

1. html structure:

 <div id="loadBar01" class="loadBar">        <div>             <span class="percent">                <i></i>             </span>        </div>        <span class="percentNum">0%</span>    </div>

Simple analysis:
Div. loadBar indicates the entire progress bar

Div. loadBar div sets the rounded corner table box, div. loadBar div span is the progress (dynamically changing the width), and div. loadBar div span I is the progress filling background color (that is, width = 100%)

You can design the HTML structure by yourself. If it is reasonable, there is no problem ~

2. CSS:

 body        {            font-family: Thoma, Microsoft YaHei, 'Lato', Calibri, Arial, sans-serif;        }        #content        {            margin: 120px auto;            width: 80%;        }        .loadBar        {            width: 600px;            height: 30px;            border: 3px solid #212121;            border-radius: 20px;            position: relative;        }        .loadBar div        {            width: 100%;            height: 100%;            position: absolute;            top: 0;            left: 0;        }        .loadBar div span, .loadBar div i        {            box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .4);            width: 0%;            display: block;            height: 100%;            position: absolute;            top: 0;            left: 0;            border-radius: 20px;        }        .loadBar div i        {            width: 100%;            -webkit-animation: move .8s linear infinite;            background: -webkit-linear-gradient(left top, #7ed047 0%, #7ed047 25%, #4ea018 25%, #4ea018 50%, #7ed047 50%, #7ed047 75%, #4ea018 75%, #4ea018 100%);            background-size: 40px 40px;        }        .loadBar .percentNum        {            position: absolute;            top: 100%;            right: 10%;            padding: 1px 15px;            border-bottom-left-radius: 16px;            border-bottom-right-radius: 16px;            border: 1px solid #222;            background-color: #222;            color: #fff;        }        @-webkit-keyframes move        {            0%            {                background-position: 0 0;            }            100%            {                background-position: 40px 0;            }        }

The effect is as follows:

The overall layout is to use position relative and absolute ~

The most difficult part is the implementation of gradient Bars:

We use

A. gradient from top left to bottom right

B. Color: 0-25% is #7ed047, 25%-50% is #4ea018, 50%-75% is #7ed047, 75%-100% is #4ea018

C. Set the background size to 40px and 40px. The setting must exceed the height. The larger the value, the wider the width of the text.

Analysis diagram:

The Setting principle is as follows. At the same time, the larger the background width, the larger the text width;

3. Set Js and create a LoadBar object

 function LoadingBar(id)        {            this.loadbar = $("#" + id);            this.percentEle = $(".percent", this.loadbar);            this.percentNumEle = $(".percentNum", this.loadbar);            this.max = 100;            this.currentProgress = 0;        }        LoadingBar.prototype = {            constructor: LoadingBar,            setMax: function (maxVal)            {                this.max = maxVal;            },            setProgress: function (val)            {                if (val >= this.max)                {                    val = this.max;                }                this.currentProgress = parseInt((val / this.max) * 100) + "%";                this.percentEle.width(this.currentProgress);                this.percentNumEle.text(this.currentProgress);            }        };

We created a LoadBar object and made public two methods, one setting the maximum progress and the other setting the current progress. For example, the maximum progress of the downloaded file is the file size and the current progress is the size of the downloaded file.

4. Test

Finally, let's test our code:

   $(function ()        {            var loadbar = new LoadingBar("loadBar01");            var max = 1000;            loadbar.setMax(max);            var i = 0;            var time = setInterval(function ()            {                loadbar.setProgress(i);                if (i == max)                {                    clearInterval(time);                    return;                }                i += 10;            }, 40);        });

Ps: For js object design, consider practicality as much as possible ~

Final Completion ~ Ha ~ Dinner ~