"JavaScript" HTML5/CSS3 implementation of the colorful progress bar application

Today's introduction is a progress bar application based on HTML5 and CSS3, which is static and provides only the multicolored appearance of the progress bar. Of course, you can dynamically set the progress value in the CSS to make it dynamic, a good way to do is to use jquery to dynamically change the progress in the CSS, the progress bar real-time moving up. Concrete effects can be seen in the demo.

You can also view the online demo here

Next we analyze the source code of this progress bar and implementation ideas, the code is mainly composed of HTML and CSS, if you need to dynamically change the progress value, you can also add JavaScript code, it is relatively simple.

HTML code:

<section class= "Container" >    <div class= "Progress" >      <span style= "width:20%;" ><span>20%</span></span>    </div>    <div class= "Progress" >      <span class= "Green" style= "width:40%;" ><span>40%</span></span>    </div>    <div class= "Progress" >      <span Class= "Orange" style= "width:60%;" ><span>60%</span></span>    </div>    <div class= "Progress" >      <span class= "Red" style= "width:80%;" ><span>80%</span></span>    </div>    <div class= "Progress" >      <span Class= "Blue" style= "width:100%;" ><span>100%</span></span>    </div>  </section>

As we can see from the HTML structure, the div with the class name progress is the parent container for the entire progress bar, and the span is the current progress, defining different progress values by width, and defining different color classes, such as Orange, so that you can render the styles in CSS later.

CSS code:

. Progress {height:20px;  Background: #ebebeb;  border-left:1px solid Transparent;  border-right:1px solid Transparent; border-radius:10px;}.  Progress > span {position:relative;  Float:left;  Margin:0 -1px;  min-width:30px;  height:18px;  line-height:16px;  Text-align:right;  Background: #cccccc;  BORDER:1PX solid;  Border-color: #bfbfbf #b3b3b3 #9e9e9e;  border-radius:10px;  Background-image:-webkit-linear-gradient (Top, #f0f0f0 0, #dbdbdb 70%, #cccccc 100%);  Background-image:-moz-linear-gradient (Top, #f0f0f0 0, #dbdbdb 70%, #cccccc 100%);  Background-image:-o-linear-gradient (Top, #f0f0f0 0, #dbdbdb 70%, #cccccc 100%);  Background-image:linear-gradient (to bottom, #f0f0f0 0, #dbdbdb 70%, #cccccc 100%);  -webkit-box-shadow:inset 0 1px rgba (255, 255, 255, 0.3), 0 1px 2px rgba (0, 0, 0, 0.2); Box-shadow:inset 0 1px rgba (255, 255, 255, 0.3), 0 1px 2px rgba (0, 0, 0, 0.2);}.  Progress > Span > span {padding:0 8px;  font-size:11px;  Font-weight:bold; ColOr: #404040;  Color:rgba (0, 0, 0, 0.7); text-shadow:0 1px rgba (255, 255, 255, 0.4);}.  Progress > Span:before {content: ';  Position:absolute;  top:0;  bottom:0;  left:0;  right:0;  Z-index:1;  height:18px; Background:url ("..  /img/progress.png ") 0 0 repeat-x; border-radius:10px;}.  Progress Green {background: #85c440;  Border-color: #78b337 #6ba031 #568128;  Background-image:-webkit-linear-gradient (Top, #b7dc8e 0, #99ce5f 70%, #85c440 100%);  Background-image:-moz-linear-gradient (Top, #b7dc8e 0, #99ce5f 70%, #85c440 100%);  Background-image:-o-linear-gradient (Top, #b7dc8e 0, #99ce5f 70%, #85c440 100%); Background-image:linear-gradient (to bottom, #b7dc8e 0, #99ce5f 70%, #85c440 100%);}.  Progress. Red {background: #db3a27;  Border-color: #c73321 #b12d1e #8e2418;  Background-image:-webkit-linear-gradient (Top, #ea8a7e 0, #e15a4a 70%, #db3a27 100%);  Background-image:-moz-linear-gradient (Top, #ea8a7e 0, #e15a4a 70%, #db3a27 100%); Background-image:-o-linear-gradient (Top, #ea8a7e 0, #e15a4a 70%, #db3a27 100%); Background-image:linear-gradient (to bottom, #ea8a7e 0, #e15a4a 70%, #db3a27 100%);}.  Progress. Orange {background: #f2b63c;  Border-color: #f0ad24 #eba310 #c5880d;  Background-image:-webkit-linear-gradient (Top, #f8da9c 0, #f5c462 70%, #f2b63c 100%);  Background-image:-moz-linear-gradient (Top, #f8da9c 0, #f5c462 70%, #f2b63c 100%);  Background-image:-o-linear-gradient (Top, #f8da9c 0, #f5c462 70%, #f2b63c 100%); Background-image:linear-gradient (to bottom, #f8da9c 0, #f5c462 70%, #f2b63c 100%);}.  Progress. Blue {background: #5aaadb;  Border-color: #459fd6 #3094d2 #277db2;  Background-image:-webkit-linear-gradient (Top, #aed5ed 0, #7bbbe2 70%, #5aaadb 100%);  Background-image:-moz-linear-gradient (Top, #aed5ed 0, #7bbbe2 70%, #5aaadb 100%);  Background-image:-o-linear-gradient (Top, #aed5ed 0, #7bbbe2 70%, #5aaadb 100%); Background-image:linear-gradient (to bottom, #aed5ed 0, #7bbbe2 70%, #5aaadb 100%);}

Here we have CSS definitions for the different color progress bars defined in the preceding HTML, setting the background color, border color, and setting the background of the linear gradient with the Linear-gradient property. It seems that the CSS code is very simple and there are not too many CSS3 things. The above is just the core code, you can also download the complete code study yourself. SOURCE Download >>

Http://www.cnblogs.com/html5tricks/p/3913829.html