Comment implémenter une barre de suivi de progression en utilisant CSS ? (exemple de code)

Cet article vous explique comment utiliser le CSS pour implémenter une barre de suivi de progression ? (Exemple de code), les amis dans le besoin peuvent s'y référer.

Il s'agit d'un petit tutoriel sur la façon de créer un widget d'interface utilisateur très simple pour indiquer à l'utilisateur à quelle étape du processus il se trouve.

Nous allons commencer avec un petit morceau de HTML :

<ol class="track-progress">
  <li>
    Site Information 
    </li>
  <li>
    Data Source  
    </li>
  <li>
    Final Details  
    </li>
    </ol>

Nous allons maintenant réinitialiser le style de la liste ordonnée et faire apparaître les éléments de la liste en un seul doubler . Nous utilisons le code CSS suivant :

.track-progress {
  margin: 0;
  padding: 0;
  overflow: hidden;
  }
.track-progress li {
  list-style-type: none;
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 30px;
  height: 30px;
  background-color: #f0f0f0;
  }

Vous obtiendrez l'effet suivant :

Laissez ce tracker occuper toute la largeur disponible. Pour plus de flexibilité, nous ajouterons un attribut HTML à la balise tracker

pour déclarer le nombre d'étapes du processus. De cette façon, nous pouvons ajouter une largeur par défaut en modifiant la valeur de la propriété.

HTML :


<ol class="track-progress" data-steps="3">
  <li>
    Site Information  
    </li>
  <li>
    Data Source  
    </li>
  <li>
    Final Details  
   </li>
</ol>

CSS :

.track-progress[data-steps="3"] li { width: 33%; }
.track-progress[data-steps="4"] li { width: 25%; }
.track-progress[data-steps="5"] li { width: 20%; }

devient l'effet suivant :




Pour supprimer cet espace blanc ennuyeux, nous devons supprimer l'espace blanc entre les balises

1. On peut le faire avec des commentaires HTML :

    <ol class="track-progress" data-steps="3">
      <li>
        Site Information   </li><!--
   --><li>
        Data Source   </li><!--
   --><li>
        Final Details   </li>
    </ol>

   qui ressembleraient à ceci :
   

   

   J'aimerais ajouter une sorte de flèche pour indiquer les étapes La direction réelle de la séquence, j'avais donc besoin d'un balisage supplémentaire pour isoler le contenu de l'étape des autres matériaux de décoration :

    <ol class="track-progress" data-steps="3">
      <li class="done">
        <span>Site Information</span>
      </li><!--
   --><li class="done">
        <span>Data Source</span>
      </li><!--
   --><li>
        <span>Final Details</span>
      </li>
    </ol>

   J'ai ajouté une classe d'achèvement pour représenter les différents styles de progression. Voici le CSS :

   .track-progress li > span {
     display: block;
     color: #999;
     font-weight: bold;
     text-transform: uppercase;
     }
   .track-progress li.done > span {
     color: #666;
     background-color: #ccc;
     }

   Le résultat est :
   

   

   Pour ajouter la flèche nous utiliserons les pseudo :before et :after -éléments et donner des conseils pour créer des bordures de grande taille afin de créer des coins :

   .track-progress li > span:after,.track-progress li > span:before {
     content: "";
     display: block;
     width: 0px;
     height: 0px;
     position: absolute;
     top: 0;
     left: 0;
     border: solid transparent;
     border-left-color: #f0f0f0;
     border-width: 15px;
     }
   .track-progress li > span:after {
     top: -5px;
     z-index: 1;
     border-left-color: white;
     border-width: 20px;
     }
   .track-progress li > span:before {
     z-index: 2;
     }

   L'effet est :

   

   Maintenant, nous appliquons le style correctement afin que la couleur de la flèche correspond à l'état de l'étape précédente Faites correspondre et supprimez la flèche dans le premier élément :

   .track-progress li.done + li > span:before {
     border-left-color: #ccc;
   }
   .track-progress li:first-child > span:after,.track-progress li:first-child > span:before {
     display: none;
     }

   L'effet est :

   

   Nous voulons maintenant ajouter l'apparence d'une flèche au début et à la fin du tracker afin de pouvoir ajouter plus de marqueurs :

   <ol class="track-progress" data-steps="3">
      <li class="done">
        <span>Site Information</span>
        <i></i>
      </li><!--
   --><li class="done">
        <span>Data Source</span>
      </li><!--
   --><li>
        <span>Final Details</span>
        <i></i>
      </li>
    </ol>

   .track-progress li:first-child i,.track-progress li:last-child i {
     display: block;
     height: 0;
     width: 0;
   
     position: absolute;
     top: 0;
     left: 0;
   
     border: solid transparent;
     border-left-color: white;
     border-width: 15px;}.track-progress li:last-child i {
     left: auto;
     right: -15px;
   
     border-left-color: transparent;
     border-top-color: white;
     border-bottom-color: white;}

   Le résultat final est le suivant :

   

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!