CSS3 can change the color of the progress bar, css3 color progress bar

CSS3 can change the color of the progress bar, css3 color progress bar

Today is the weekend. I saw a progress bar application using CSS3. I thought it was great. I shared it with you and sorted out the implementation process of this CSS3 progress bar, the key to implementation is to change the background color of the progress bar based on the current progress. Below is:

View Online Demo

In terms of appearance, this progress bar is still relatively elegant and has the jQuery UI style. Let's take a look at the specific implementation process. It mainly consists of two parts: 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>

It consists of two parts: select the progress button. clicking the button will jump the progress bar to the position of the corresponding progress and display the corresponding background color.

Another part of HTML is the container of the progress bar. The progress bar changes 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 CSS code above defines the style of the progress bar and uses the gradient CSS3 attribute to make the background color of the progress bar more fashionable.

The following is the CSS code of the Key button selection progress:

#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, you can replace js to implement click selected events, which is very convenient.

You can download the source code for your own research.>

How can I use css to make the same progress bar? Help

If you do not consider IE, it is not difficult to use css3:
1. The border can be either a background image or a solid color, with rounded corners and shadows;
2. The progress bar can be implemented with a vertical linear gradient and shadow;
3. Use JavaScript to dynamically modify the div width and text display of the progress bar.

How can I achieve a circular progress bar when I am working on a website? I am using html + css to create a website with code. It is best not to talk about the principle,

1. html5 can be circular directly using the attributes of css3, and border-radius can be used to achieve rounded corners.
2. Image Format: Make a rounded image between the left and right sides. After the image is connected, it can be implemented. However, the right side needs to be changed in technology.
3. In the background format, make the background color + rounded png transparent background on both sides of the left and right, and fill the background with color.
4. Plug-ins are used. Currently, many jquery progress bar plug-ins are available, and good plug-ins are also available in bootstrap.