CSS3 progress bar that can change color by progress

Today is the weekend, see a use of CSS3 implementation of the progress bar application, feel very good, it will be shared with you, and the implementation of the CSS3 progress bar roughly sorted out, the key to achieve is based on the current progress needs to be able to change the background color of the progress bar. Here is the effect chart:

View Online Demo

In appearance, the progress bar is still more elegant, with the jquery UI style. Let's look at the specific implementation process. It's 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" 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" > &NBSP;&NBSP;&NBSP;&NBSP;&NBSp <div class= "Progress-bar" ></div>     </div>

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

There is also a portion of HTML that is the container for the progress bar, and the progress bar changes in this container.

CSS3 Code:

. container {  margin:80px auto;   width:640px   text-align:center; container. Progress {  MA
rgin: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 CSS code above 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 stylish.

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 basically, you can also download the source of your own research. Download Address >>