SS3 can change the color of the progress bar, ss3 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:
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.>