Examples of implementing progress bars and order progress bars using CSS

The preparation for the final exams in the past half month has cost me a lot of energy! I should have reviewed well today, but I wasn't in a good mood, so I just found something fun to do. Then I remembered a question given by the interviewer during the previous interview (see title), so I made some simple things to brainwash myself.

The simple effect diagram is as follows:

CSS to achieve progress bar:

HTML structure:

<div id="progress">
    70%
</div>

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 bottom, right 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%); /* Chrome 10+, Safari 5.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 a gradient, you can go to this website: http://www.colorzilla.com/gradient-editor/. This way, it becomes very simple to complete the gradient effect, which is exactly the same as the operation using PS. After setting the background to gradient, you also need to set background-size to achieve the repeating effect:

CSS to implement order progress bar:

HTML structure:

<div id="progressBar">
     <!-- Progress Bar -->
     <div>
         <span></span>
     </div>
     <!-- Five circles -->
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</div>

CSS style:

#progressBar{
    width: 80%;
    height: 50px;
    position: relative;
    margin: 50px 0 0 100px;
}
#progressBar div{
    width: 100%;
    height: 10px;
    position: absolute;
    top:50%;
    left: 0;
    margin-top:-20px;
    border:1px solid #ddd;
    background: #ccc;
}
#progressBar div 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 realize the dynamic progress bar!

PS: The CSS style is not optimized. When debugging the CSS code, I found that the style of the first circle does not work, so I changed the default background color to green. I hope that bloggers who can help me solve this small BUG will leave a message, thank you!!!

Original link: https://www.cnblogs.com/jr1993/p/4598630.html

The above is the details of the examples of implementing progress bar and order progress bar with CSS. For more information about implementing progress bar with CSS, please pay attention to other related articles on 123WORDPRESS.COM!

<<: Detailed explanation of Vue data proxy

>>: 9 code optimization tips to improve website usability that webmasters should pay attention to