JS: progress bar circolare

Ho realizzato una progress bar circolare con CSS e Javascript. Non è stato possibile evitare di usare Javascript perchè sia transition che animation non animano il conic-gradient.

    1 <!DOCTYPE html>
    2 <html>
    3     <head>
    4         <meta charset="utf-8">
    5         <title>Progress bar circolare</title>
    6         <style>
    7             .centrato {
    8                 display: flex;
    9                 justify-content: center;
   10                 align-items: center;
   11                 position: relative;
   12                 z-index: 1;
   13             }
   14             .progress-overlay {
   15                 position: fixed;
   16                 width: 100vw;
   17                 height: 100vh;
   18                 display: flex;
   19                 justify-content: center;
   20                 align-items: center;
   21             }
   22             .cerchio {
   23                 position: relative;
   24                 width: 10em;
   25                 height: 10em;
   26                 margin: 0.5em;
   27                 border-radius: 50%;
   28                 background-image: conic-gradient(darkgray 0%, lightgray 0);
   29             }
   30             .cerchio-int {
   31                 background-color: white;
   32                 display: flex;
   33                 justify-content: center;
   34                 align-items: center;
   35                 width: 7em;
   36                 height: 7em;
   37                 position: relative;
   38                 top: 50%;
   39                 left: 50%;
   40                 transform: translate(-50%, -50%);
   41                 border-radius: 50%;
   42             }
   43             .testo-interno {
   44                 position: absolute;
   45                 font-family: sans-serif;
   46                 font-size: 2em;
   47             }
   48         </style>
   49     </head>
   50     <body>
   51         <div class="progress-overlay">
   52             <div class="cerchio">
   53                 <div class="cerchio-int">
   54                     <div class="testo-interno">0%</div>
   55                 </div>
   56             </div>
   57         </div>
   58         <div class="centrato">
   59             <input type="button" value="Cliccami!" onclick="impostaA100();"></input>
   60         </div>
   61         <script>
   62             let cerchiovalnext = [];
   63             let cerchiovalprev = [];
   64 
   65             function _aggiornaC(cerchio, indice) {
   66                 if (cerchiovalprev[indice] < cerchiovalnext[indice]) {
   67                     let x = (cerchiovalnext[indice] - cerchiovalprev[indice]) / 20;
   68                     cerchiovalprev[indice] += x;
   69                     if (cerchiovalprev[indice] > (cerchiovalnext[indice] - 1.0))
   70                         cerchiovalprev[indice] = cerchiovalnext[indice];
   71                     cerchio.style.backgroundImage = "conic-gradient(darkgray " + cerchiovalprev[indice] + "%, lightgray 0)";
   72                     setTimeout(() => { _aggiornaC(cerchio, indice); }, 20);
   73                 }
   74             }
   75 
   76             function aggiornaCerchio(cerchio, indice, nuovoval) {
   77                 const testo = cerchio.children[0].children[0];
   78                 testo.textContent = nuovoval + "%";
   79                 cerchiovalprev[indice] = cerchiovalnext[indice];
   80                 cerchiovalnext[indice] = nuovoval;
   81                 setTimeout(() => { _aggiornaC(cerchio, indice); }, 20);
   82             }
   83 
   84             function impostaA100() {
   85                 const cerchi = document.getElementsByClassName("cerchio");
   86                 for (let i = 0; i < cerchi.length; i++) {
   87                     cerchiovalnext[i] = 0;
   88                     cerchiovalprev[i] = 0;
   89                     aggiornaCerchio(cerchi[i], i, 100);
   90                 }
   91             }
   92         </script>
   93     </body>
   94 </html>

Come si può vedere nella riga n.28, viene usato un conic gradient per creare la progress bar circolare.
In javascript, una funzione aggiornaCerchio() prende in ingresso un valore (nuovoval) per impostare la percentuale sulla progress bar.
La funzione aggiornaCerchio() viene chiamata dalla funzione impostaA100() che viene triggerata dal bottone "Cliccami!".
L'animazione viene eseguita dalla funzione _aggiornaC() , che non va richiamata direttamente ma verrà richiamata da aggiornaCerchio().

Il risultato finale è che grazie alla funzione aggiornaCerchio(cerchio, indice, 100) , la progress bar partirà dallo 0% e si riempirà fino al 100%.

2024
18 gen