Maison > Article > interface Web > Comment obtenir des effets de barre de progression horizontale et verticale avec CSS

Comment obtenir des effets de barre de progression horizontale et verticale avec CSS

王林avant: 2020-05-19 09:08:253538parcourir

1. Le code d'implémentation de la barre de progression horizontale

<html>
<head>
<title>横向进度条</title>
<style type="text/css">   
    .loadbar
    {
         width:200px;
         height:25px;
         background-color:#fff;
         border:1px solid #ccc;        
    }
    .bar
    {
        line-height:25px;        
        height:100%;
        display:block;        
        font-family:arial;
        font-size:12px;
        background-color:#bb9319;        
        color:#fff;
    }
</style>
</head>
<body> 
    <div class="loadbar">
      <strong class="bar" style=&#39;width:30%;&#39;>30%</strong>
    </div>
</body>
</html>

L'effet est le suivant :

Comment obtenir des effets de barre de progression horizontale et verticale avec CSS

2. Code d'implémentation de la barre de progression verticale

<html>
<head>
<title>竖向进度条</title>
<style type="text/css">   
    .loadbar
    {
         width:25px;
         height:200px;
         background-color:#fff;
         border:1px solid #ccc;
         position:relative; 
    }
    .bar
    {
        width:100%;
        display:block;        
        font-family:arial;
        font-size:12px; 
        background-color:#bb9319;
        color:#fff;       
        position:absolute;
        bottom:0;        
    }
</style>
</head>
<body> 
    <div class="loadbar">
      <strong class="bar" style=&#39;height:30%;&#39;>30%</strong>
    </div>
</body>
</html>

Résultats de l'implémentation :

Comment obtenir des effets de barre de progression horizontale et verticale avec CSS

Tutoriel recommandé : Tutoriel de base CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment obtenir un effet d'ombre longue de police en CSSArticle suivant：Comment obtenir un effet d'ombre longue de police en CSS

Articles Liés

Voir plus