HTML5/CSS3 implements a colorful progress bar application and html5css3 progress bar

HTML5/CSS3 implements a colorful progress bar application and html5css3 progress bar

Today we will introduce a progress bar application based on HTML5 and CSS3. This progress bar is static and only provides a colorful appearance of the progress bar. Of course, you can dynamically set the progress value in CSS to make it dynamic. A good way is to use jQuery to dynamically change the progress value in CSS so that the progress bar can be moved in real time. For more information, see the demo.

You can also view online demos here

Next, let's analyze the source code and Implementation ideas of this progress bar. The Code mainly consists of HTML and CSS. If you need to dynamically change the progress value, you can also add Javascript code by yourself, it is also 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>

From the HTML structure, we can see that the div class named progress is the parent container of the entire progress bar, and the span in it is the current progress. Different progress values are defined using width, define different color classes, such as orange, for style rendering in CSS.

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 made CSS definitions for the progress bars of different colors defined in the previous HTML, set the background color and border color, and set the linear gradient background using the linear-gradient attribute. It seems that CSS code is very simple, and there is not much about CSS3. The above is only the core code. You can also download the complete code research by yourself. Download source code>

Html5/CSS3: Create a table.

The Code is as follows. IE is not supported. use FireFox or Safair to check the effect.
Here we mainly apply several functions of CSS3, the border "border-radius", and the pseudo class selector "E: nth-child (n )". The pseudo class "E: hover" is not a new feature of CSS3. Its function is to change the style when the mouse is hovering over the E element.
Thank you!

<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Style type = "text/css">
. Radius {
Border-width: 1px;
Border-style: solid;
-Moz-border-radius: 11px;
-Khtml-border-radius: 11px;
-Webkit-border-radius: 11px;
Border-radius: 11px;
Padding: 5px;
}
. Radius th {background-color: # 0000ff; color: # ffffff ;}
. Radius tr: nth-child (odd) {background-color: # FF0000 ;}
. Radius tr: nth-child (even) {background-color: #00ff00 ;}
. Radius tr: hover {background-color: # FF0 ;}
</Style>
</Head>

<Body>
<Table width = "200" class = "radius">
<Tr>
<Th> 1 </th>
<Th> 2 </th>
<Th> 3 </th>
</Tr>
<Tr>
<Td> 3 </td>
<Td> 4 </td>
<Td> 5 </td>
</Tr>
<Tr>
<Td> 5 </td>
<Td> 6 </td>
<Td> 7 </td>
</Tr>
<Tr>
<Td> 7 </td>
<Td> 8 </td>
<Td> 9 </td>
</Tr>
<Tr>
<Td> 0 </td>
<Td> 1 </td>
<Td> 2 </td>
</Tr &... the remaining full text>

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.