SS3 progress bar that can be discolored by progress

Today is the weekend, see a use CSS3 implementation of progress bar application, feel very good, will it share to everyone, and this CSS3 progress bar implementation process roughly collated, the key to achieve is based on the current progress need to be able to change the background color of the progress bar. Here are the following:

In terms of appearance, the progress bar is still more elegant, with the style of the jquery UI. Let's take a look at the specific implementation process. It is mainly two-part code, HTML and CSS3.

HTML code:

<input type= "Radio" class= "Radio" name= "Progress" value= "five" id= "five" >    <label for= "Five" class= "label ">5%</label>    <input type=" Radio "class=" Radio "name=" Progress "value=" twentyfive "id=" twentyfive " checked>    <label for= "twentyfive" class= "label" >25%</label>    <input type= "Radio" class= " Radio "name=" Progress "value=" fifty "id=" Fifty ">    <label for=" Fifty "class=" label ">50%</label>    <input type= "Radio" class= "Radio" name= "Progress" value= "seventyfive" id= "seventyfive" >    <label for = "Seventyfive" class= "label" >75%</label>    <input type= "Radio" class= "Radio" name= "Progress" value= " Onehundred "id=" onehundred ">    <label for=" onehundred "class=" label ">100%</label>    <div class= "Progress" >      <div class= "Progress-bar" ></div>    </div>

Mainly consists of two parts, part is the selection of the progress of the button, click the button will let the progress bar to jump to the corresponding progress of the position and display the corresponding background color.

And some of the HTML is the container for the progress bar, and the progress bar has changed in this container.

CSS3 Code:

. container {margin:80px auto;  width:640px; Text-align:center;}.  Container. Progress {margin:0 auto; width:400px;}.  Progress {padding:4px;  Background:rgba (0, 0, 0, 0.25);  border-radius:6px;  -webkit-box-shadow:inset 0 1px 2px rgba (0, 0, 0, 0.25), 0 1px rgba (255, 255, 255, 0.08); Box-shadow:inset 0 1px 2px rgba (0, 0, 0, 0.25), 0 1px rgba (255, 255, 255, 0.08);}.  Progress-bar {position:relative;  height:16px;  border-radius:4px;  -webkit-transition:0.4s linear;  -moz-transition:0.4s linear;  -o-transition:0.4s linear;  Transition:0.4s linear;  -webkit-transition-property:width, Background-color;  -moz-transition-property:width, Background-color;  -o-transition-property:width, Background-color;  Transition-property:width, Background-color;  -webkit-box-shadow:0 0 1px 1px rgba (0, 0, 0, 0.25), inset 0 1px rgba (255, 255, 255, 0.1); box-shadow:0 0 1px 1px rgba (0, 0, 0, 0.25), inset 0 1px rgba (255, 255, 255, 0.1);}. Progress-bar:before,. Progress-bar:after {CoNtent: ";  Position:absolute;  top:0;  left:0; right:0;}.  Progress-bar:before {bottom:0; Background:url ("..  /img/stripes.png ") 0 0 repeat; border-radius:4px 4px 0 0;}.  progress-bar:after {z-index:2;  bottom:45%;  border-radius:4px;  Background-image:-webkit-linear-gradient (Top, RGBA (255, 255, 255, 0.3), RGBA (255, 255, 255, 0.05));  Background-image:-moz-linear-gradient (Top, RGBA (255, 255, 255, 0.3), RGBA (255, 255, 255, 0.05));  Background-image:-o-linear-gradient (Top, RGBA (255, 255, 255, 0.3), RGBA (255, 255, 255, 0.05)); Background-image:linear-gradient (to bottom, rgba (255, 255, 255, 0.3), RGBA (255, 255, 255, 0.05));}

The above CSS code defines the style of the progress bar and uses the CSS3 property of the gradient to make the background color of the progress bar more fashionable.

Next is the key button to select the progress of the CSS code:

#five: Checked ~. Progress >. progress-bar {  width:5%;  Background-color: #f63a0f;} #twentyfive: Checked ~. Progress >. progress-bar {  width:25%;  Background-color: #f27011;} #fifty: Checked ~. Progress >. progress-bar {  width:50%;  Background-color: #f2b01e;} #seventyfive: Checked ~. Progress >. progress-bar {  width:75%;  Background-color: #f2d31b;} #onehundred: Checked ~. Progress >. progress-bar {  width:100%;  Background-color: #86e01e;}. Radio {  display:none;}. label {  display:inline-block;  margin:0 5px 20px;  PADDING:3PX 8px;  Color: #aaa;  text-shadow:0 1px black;  border-radius:3px;  Cursor:pointer;}. radio:checked +. Label {  color:white;  Background:rgba (0, 0, 0, 0.25);}

With the above CSS3 code can replace JS to achieve click on the selected event, very convenient.

The way to achieve this is roughly the case, you can also download the source of their own research. >>

SS3 progress bar that can be discolored by progress