Comment implémenter la barre de progression et la barre de progression des commandes avec CSS

Le rendu simple est le suivant :

Barre de progression de l'implémentation CSS :

structure html :

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

style css :

#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;   
}

Pour la barre de progression, la couleur de progression peut également être une couleur unie. Si vous souhaitez utiliser des dégradés, vous pouvez accéder à ceci. site Web : http://www.php.cn/, il devient très simple de compléter l'effet de dégradé, ce qui revient à utiliser PS. Après avoir défini l'arrière-plan en dégradé, vous devez également définir la taille de l'arrière-plan afin que l'effet répétitif puisse être obtenu :

Css pour implémenter la barre de progression de la commande :

structure html :

<p id="progressBar">  
     <!-- 进度条 -->  
     <p>  
         <span></span>  
     </p>  
     <!-- 五个圆 -->  
     <span></span>  
     <span></span>  
     <span></span>  
     <span></span>  
     <span></span>  
</p>

style css :

#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;   
}

Ensuite, vous pouvez utiliser JS pour implémenter une barre de progression dynamique !

PS : Le style CSS n'a pas été beaucoup optimisé. Ensuite, lors du débogage du code CSS, j'ai constaté que le premier style de cercle ne fonctionnait pas, j'ai donc changé la couleur d'arrière-plan par défaut en vert, j'espère que cela pourra aider. Je résous ce petit bug

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles sur la façon d'implémenter les barres de progression et de commander les barres de progression avec CSS, veuillez faire attention au site Web PHP chinois !