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

Source: Internet
Author: User
Tags border color

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.