CSS implementation of progress bar and order progress bar method

Simply as follows:

CSS Implementation progress bar:

HTML structure:

<p id= "Progress" >      <span>70%</span>  </p>

CSS style:

#progress {width:50%;       height:30px;       border:1px solid #ccc;       border-radius:15px;       margin:50px 0 0 100px;       Overflow:hidden;   box-shadow:0 0 5px 0px #ddd inset;       } #progress span {display:inline-block;       width:70%;       height:100%; Background: #2989d8; /* Old browsers */background:-moz-linear-gradient (45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%);/* FF 3.6+ */Background:-webkit-gradient (linear, left Bottombottom, Rightright top, Color-stop (33%, #2989d8), Color-stop (3 4%, #7db9e8), Color-stop (59%, #7db9e8), Color-stop (60%, #2989d8));  /* chrome,safari4+ */background:-webkit-linear-gradient (45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%);/* chrome10+,safari5.1+ */Background:-o-linear-gradient (45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%);/* O      Pera 11.10+ */background:-ms-linear-gradient (45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%);/* ie10+ */ BAckground:linear-gradient (45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); * * * */Filter:progid:DXImageT Ransform. Microsoft.gradient (startcolorstr= ' #2989d8 ', endcolorstr= ' #2989d8 ', gradienttype=1);       /* ie6-9 fallback on horizontal gradient */background-size:60px 30px;       Text-align:center;   Color: #fff; }

For the progress bar, where the progress of the color can also be a solid color, if you want to use a gradient, you can go to this site: http://www.php.cn/, so that the completion of the gradient effect is very simple, with the operation of PS is the same. After setting the background as a gradient, you also need to set background-size so that you can achieve the repetition effect:

CSS Implementation Order progress bar:

HTML structure:

<p id= "ProgressBar" >       <!--progress Bar--       <p>           <span></span>       </p>       <!--five round--       <span></span>       <span></span>       <span></span>       <span></span>       <span></span>  </p>

CSS style:

#progressBar {width:80%;       height:50px;       position:relative;   margin:50px 0 0 100px;       } #progressBar p{width:100%;       height:10px;       Position:absolute;       top:50%;       left:0;       margin-top:-20px;       border:1px solid #ddd;   Background: #ccc;       } #progressBar p span{position:absolute;       Display:inline-block;       Background:green;       height:10px;   width:25%;       } #progressBar >span{Position:absolute;       top:0;       Margin-top: -10px;       width:40px;       height:40px;       border:2px solid #ddd;       border-radius:50%;       Background:green;       Margin-left: -20px;   Color: #fff;   } #progressBar >span:nth-child (1) {left:0%;       } #progressBar >span:nth-child (2) {left:25%;   Background:green;       } #progressBar >span:nth-child (3) {left:50%;   Background: #ccc;       } #progressBar >span:nth-child (4) {left:75%; Background: #ccC       } #progressBar >span:nth-child (5) {left:100%;   Background: #ccc; }

Then use JS to achieve the dynamic progress bar!

PS:CSS style is not how to optimize, and then debugging CSS code found that the first circle style does not work, so the default background color is changed to green, hoping to help me solve this small bug

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.