Πρόοδος

Τεκμηρίωση και παραδείγματα για τη χρήση προσαρμοσμένων γραμμών προόδου Bootstrap που διαθέτουν υποστήριξη για στοιβαγμένες γραμμές, κινούμενα φόντο και ετικέτες κειμένου.

Σε αυτήν την σελίδα

Πως δουλεύει

Τα στοιχεία προόδου είναι κατασκευασμένα με δύο στοιχεία HTML, μερικά CSS για να ορίσετε το πλάτος και μερικά χαρακτηριστικά. Δεν χρησιμοποιούμε το στοιχείο HTML5<progress> , διασφαλίζοντας ότι μπορείτε να στοιβάζετε γραμμές προόδου, να τις κάνετε κίνηση και να τοποθετείτε ετικέτες κειμένου πάνω τους.

Χρησιμοποιούμε το .progressως περιτύλιγμα για να υποδείξουμε τη μέγιστη τιμή της γραμμής προόδου.
Χρησιμοποιούμε το εσωτερικό .progress-barγια να υποδείξουμε την πρόοδο μέχρι στιγμής.
.progress-barΑπαιτεί ένα ενσωματωμένο στυλ, μια τάξη βοηθητικού προγράμματος ή προσαρμοσμένο CSS για να ορίσετε το πλάτος τους .
Το .progress-barαπαιτεί επίσης ορισμένα roleκαι ariaχαρακτηριστικά για να είναι προσβάσιμο.

Συνδυάστε τα όλα μαζί και έχετε τα ακόλουθα παραδείγματα.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Το Bootstrap παρέχει μια χούφτα βοηθητικά προγράμματα για τη ρύθμιση του πλάτους . Ανάλογα με τις ανάγκες σας, αυτά μπορεί να βοηθήσουν στη γρήγορη διαμόρφωση της προόδου.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Ετικέτες

Προσθέστε ετικέτες στις γραμμές προόδου σας τοποθετώντας κείμενο μέσα στο .progress-bar.

25%

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Υψος

Ορίζουμε μόνο μια heightτιμή στο .progress, οπότε αν αλλάξετε αυτήν την τιμή, το εσωτερικό .progress-barθα αλλάξει αυτόματα ανάλογα το μέγεθος.

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Φόντο

Χρησιμοποιήστε κλάσεις βοηθητικού προγράμματος παρασκηνίου για να αλλάξετε την εμφάνιση μεμονωμένων γραμμών προόδου.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Πολλαπλές μπάρες

Συμπεριλάβετε πολλές γραμμές προόδου σε ένα στοιχείο προόδου, εάν χρειάζεστε.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Ριγέ

Προσθέστε .progress-bar-stripedσε οποιοδήποτε .progress-barγια να εφαρμόσετε μια λωρίδα μέσω διαβάθμισης CSS πάνω από το χρώμα φόντου της γραμμής προόδου.

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Κινούμενες ρίγες

Η ριγέ κλίση μπορεί επίσης να κινηθεί. Προσθέστε .progress-bar-animatedστο για .progress-barνα κάνετε κίνηση των λωρίδων από δεξιά προς τα αριστερά μέσω κινούμενων εικόνων CSS3.

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

Sass

Μεταβλητές

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Βασικά καρέ

Χρησιμοποιείται για τη δημιουργία κινούμενων εικόνων CSS για .progress-bar-animated. Περιλαμβάνεται στο scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}