Fondazione - Nozioni di base sulla barra di avanzamento

Descrizione

La barra di avanzamento contiene due elementi contenitore, .progress e un meter, .progress-meter . Lo stato della barra di avanzamento è semplificato dagli attributi di ruolo e aria .

Il seguente elenco chiarisce lo scopo degli attributi:

  • aria-valuemin - Rappresenta il valore minimo per la barra di avanzamento.

  • aria-valuemax - Rappresenta il valore massimo per la barra di avanzamento.

  • aria-valuenow - Rappresenta il valore corrente per la barra di avanzamento.

  • aria-valuetext - Se il valore della barra di avanzamento non è numerico, aggiungere questo attributo che deve contenere una versione leggibile dall'uomo del valore della barra di avanzamento.

Per riempire la barra di avanzamento, devi aggiungere la proprietà CSS della larghezza al misuratore interno.

Esempio

L'esempio seguente mostra come utilizzare la barra di avanzamento in Foundation.

<html>
   <head>
      <title>Progress Bar</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <h2>Progress Bar</h2>
      <div class = "progress" role = "progressbar" tabindex = "0" aria-valuenow = "0" aria-valuemin = "0" aria-valuemax = "100">
         <div class = "progress-meter"></div>
      </div>

      <div class = "progress" role = "progressbar" tabindex = "0" aria-valuenow = "80" aria-valuemin = "0" aria-valuetext = "80 percent" aria-valuemax = "100">
         <div class = "progress-meter" style = "width: 80%"></div>
      </div>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

  • Salva il codice html sopra indicato progress_basics.html file.

  • Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.