Today I bring you a cool progress bar. The progress bar gives users a better experience in time-consuming operations and will not make users feel like they are waiting blindly. For long-term waits without progress bars, users If the task freezes, close the application without hesitation; generally used for downloading tasks, deleting a large number of tasks, loading web pages, etc.; if you use HTML5 for mobile phone layout, it can also be used on mobile phones~
effect Picture:
1. HTML structure:
1 2 3 4 5 6 7 8 |
|
Simple analysis:
p.loadBar represents the entire progress bar
p .loadBar p sets the rounded table frame, p.loadBar p span is the progress (dynamically changing the width), p.loadBar p span i is the progress filled with background color (i.e. width=100%)
HTML structure , everyone can design it by themselves, as long as it is reasonable, there is no problem~
2. CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
|
The effect at this time is:
The overall layout is to use position relative and absolute~
The more difficult part is the implementation of the gradient bar:
We use
a. Gradient from upper left to lower right
b. Colors are: 0-25% is #7ed047, 25%-50% is #4ea018, 50%-75% is # 7ed047, 75%-100% is #4ea018
c, the size of the background is 40px 40px. This setting can exceed the height. The larger the value, the wider the width of the article
Analysis chart:
The setting principle is as shown in the picture above. At the same time, the larger the background width can be set, the larger the text width will be;
3. Set Js and create a LoadBar object
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
We created a LoadBar object and exposed two methods, one to set the maximum progress and the other to set the current progress; for example, the maximum progress of downloading a file is the file size, and the current progress is the size of the downloaded file.
4. Test
Finally we test our code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
The above is the detailed content of Implementation of HTML5/CSS3 web page loading progress bar, download progress bar and other classic cases. For more information, please follow other related articles on the PHP Chinese website!