How to implement progress bar and order progress bar with CSS

The simple rendering is 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%); /* FF3.6+ */  
    background: -webkit-gradient(linear, left bottombottom, rightright top, color-stop(33%,#2989d8), color-stop(34%,#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%); /* Opera 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%); /* W3C */  
    filter: progid:DXImageTransform.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, the progress color can also be a solid color. If you want to use gradients, you can go to this website: http://www.php .cn/, it becomes very simple to complete the gradient effect, which is the same as using PS. After setting the background to a gradient, you also need to set the background-size so that the repeating effect can be achieved:

css to implement the order progress bar:

html structure:

<p id="progressBar">  
     <!-- 进度条 -->  
     <p>  
         <span></span>  
     </p>  
     <!-- 五个圆 -->  
     <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 you can use JS to implement a dynamic progress bar!

PS: The CSS style was not optimized very much. Then when debugging the CSS code, I found that the first circle style did not work, so I changed the default background color to green. I hope it can help me solve this small BUG

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

For more related articles on how to implement progress bars and order progress bars with CSS, please pay attention to the PHP Chinese website!