Share
Niente sul web avviene all'istante. L'unica differenza è nel tempo necessario per completare un processo. Alcuni processi possono verificarsi in pochi millisecondi, mentre altri possono richiedere diversi secondi o minuti. Ad esempio, potresti modificare un'immagine molto grande caricata dai tuoi utenti e questo processo potrebbe richiedere del tempo. In questi casi, è una buona idea far sapere ai visitatori che il sito Web non è bloccato da qualche parte, ma in realtà sta lavorando sull'immagine e sta facendo progressi.
Uno dei modi più comuni per mostrare ai lettori quanto è progredito un processo è usare le barre di avanzamento. In questo tutorial imparerai come utilizzare la libreria ProgressBar.js per creare diverse barre di avanzamento con forme semplici e complesse.
Una volta inclusa la libreria nel progetto, la creazione di una barra di avanzamento con questa libreria è semplice. ProgressBar.js è supportato in tutti i principali browser, incluso IE9 +, il che significa che puoi usarlo in qualsiasi sito web che stai creando con sicurezza. È possibile ottenere l'ultima versione della libreria da GitHub o utilizzare direttamente un collegamento CDN per aggiungerlo al progetto.
Per evitare comportamenti imprevisti, assicurati che il contenitore della barra di avanzamento abbia le stesse proporzioni della barra di avanzamento. Nel caso di un cerchio, dovrebbero essere le proporzioni del contenitore 1: 1 perché la larghezza sarà uguale all'altezza. Nel caso di un semicerchio, dovrebbe essere il rapporto di aspetto del contenitore 2: 1 perché la larghezza sarà il doppio dell'altezza. Allo stesso modo, nel caso di una linea semplice, il contenitore dovrebbe avere un rapporto aspetto di 100: strokeWidth per la linea.
Quando crei barre di progresso con una linea, un cerchio o un semicerchio, puoi semplicemente usare il ProgressBar.Shape () metodo per creare la barra di avanzamento. In questo caso, il Forma può essere un Cerchio, Linea, o Semicerchio. È possibile passare due parametri al Forma() metodo. Il primo parametro è un selettore o nodo DOM per identificare il contenitore della barra di avanzamento. Il secondo parametro è un oggetto con coppie chiave-valore che determinano l'aspetto della barra di avanzamento.
È possibile specificare il colore della barra di avanzamento usando colore proprietà. Per impostazione predefinita, qualsiasi barra di avanzamento creata creerà un colore grigio scuro. Lo spessore della barra di avanzamento può essere specificato usando strokeWidth proprietà. Tieni presente che la larghezza qui non è in pixel ma in termini di percentuale delle dimensioni della tela. Ad esempio, se la tela è larga 200 px, a strokeWidth il valore di 5 creerà una linea che ha uno spessore di 10px.
Oltre alla barra di avanzamento principale, la libreria consente anche di tracciare una linea finale che mostrerà ai lettori il percorso su cui si muoverà la barra di avanzamento. Il colore della linea di traccia può essere specificato usando il trailColor proprietà, e la sua larghezza può essere specificata usando il trailWidth proprietà. Proprio come strokeWidth, il trailWidth proprietà calcola anche la larghezza in termini percentuali.
Il tempo totale impiegato dalla barra di avanzamento per passare dallo stato iniziale al suo stato finale può essere specificato utilizzando il comando durata proprietà. Per impostazione predefinita, una barra di avanzamento completerà la sua animazione in 800 millisecondi.
Puoi usare il facilitando proprietà per specificare come deve muoversi una barra di avanzamento durante l'animazione. Tutte le barre di avanzamento si sposteranno con a lineare velocità di default. Per rendere l'animazione più attraente, puoi impostare questo valore su qualcosa di simile easeIn, easeOut, easeInOut, o rimbalzo.
Dopo aver specificato i valori dei parametri iniziali, puoi animare le barre di avanzamento usando animare() metodo. Questo parametro accetta tre parametri. Il primo parametro è l'importo fino al quale si desidera animare la linea di avanzamento. Gli altri due parametri sono opzionali. Il secondo parametro può essere utilizzato per sovrascrivere qualsiasi valore di proprietà di animazione impostato durante l'inizializzazione. Il terzo parametro è una funzione di callback per fare qualcos'altro una volta che l'animazione termina.
Nell'esempio seguente, ho creato tre diverse barre di avanzamento utilizzando tutte le proprietà che abbiamo discusso finora.
Accentsconagua
var lineBar = new ProgressBar.Line ('# line-container', color: 'orange', strokeWidth: 2, trailWidth: 0.5); lineBar.animate (1, duration: 1000); var circleBar = new ProgressBar.Circle ('# circle-container', color: 'white', strokeWidth: 2, trailWidth: 10, trailColor: 'black', easing: 'easeInOut'); circleBar.animate (0.75, duration: 1500); var semiBar = new ProgressBar.SemiCircle ('# semi-container', color: 'violet', strokeWidth: 2, trailWidth: 0.5, easing: 'bounce'); semiBar.animate (1, duration: 3000);L'unica cosa che cambia con l'animazione delle barre di avanzamento nell'esempio precedente è la loro lunghezza. Tuttavia, ProgressBar.js consente anche di modificare altri attributi fisici come la larghezza e il colore della linea di tracciamento. In questi casi, dovrai specificare i valori iniziali per la barra di avanzamento all'interno di a partire dal parametro e i valori finali all'interno del a parametro durante l'inizializzazione delle barre di avanzamento.
Puoi anche dire alla biblioteca di creare un elemento di testo di accompagnamento con la barra di avanzamento per mostrare alcune informazioni testuali ai tuoi utenti. Il testo può essere qualsiasi cosa, da un valore statico a un valore numerico che indica il progresso dell'animazione. Il testo parametro accetterà un oggetto come valore.
Questo oggetto può avere a valore parametro per specificare il testo iniziale da mostrare all'interno dell'elemento. Puoi anche fornire un nome di classe da aggiungere all'elemento di testo usando il nome della classe parametro. Se si desidera applicare alcuni stili in linea all'elemento di testo, è possibile specificarli tutti come valore di stile parametro. Tutti gli stili di default possono essere rimossi impostando il valore di stile a nullo. È importante ricordare che i valori predefiniti si applicano solo se non è stato impostato un valore personalizzato per alcuna proprietà CSS all'interno stile.
Il valore all'interno dell'elemento di testo rimane lo stesso durante l'intera animazione se non lo aggiorni da solo. Fortunatamente, ProgressBar.js fornisce anche a passo parametro che può essere usato per definire una funzione da chiamare con ogni passo dell'animazione. Dal momento che questa funzione sarà chiamata più volte al secondo, è necessario fare attenzione con il suo uso e mantenere i calcoli al suo interno semplice.
var lineBar = new ProgressBar.Line ("# line-container", strokeWidth: 4, trailWidth: 0.5, from: color: "# FF9900", a: color: "# 00FF99", text: value : '0', className: 'progress-text', style: color: 'black', posizione: 'absolute', top: '-30px', padding: 0, margin: 0, transform: null, step : (state, shape) => shape.path.setAttribute ("stroke", state.color); shape.setText (Math.round (shape.value () * 100) + '%');); lineBar.animate (1, duration: 4000); var circleBar = new ProgressBar.Circle ("# circle-container", color: "white", strokeWidth: 2, trailWidth: 25, trailColor: "black", attenuazione: "easeInOut", da: color: "# FF9900 ", width: 1, a: color:" # FF0099 ", width: 25, text: valore: '0', className: 'progress-text', style: color: 'black', posizione: 'absolute', top: '45% ', a sinistra: '42%', padding: 0, margin: 0, transform: null, step: (state, shape) => shape.path.setAttribute ("stroke ", state.color); shape.path.setAttribute (" larghezza del tratto ", state.width); shape.setText (Math.round (shape.value () * 100) + '%');); circleBar.animate (0.75, duration: 1500); var semiBar = new ProgressBar.SemiCircle ("# semi-contenitore", color: "violet", strokeWidth: 2, trailWidth: 8, trailColor: "black", easing: "bounce", da: color: "# FF0099 ", width: 1, a: color:" # FF9900 ", width: 2, text: valore: '0', className: 'progress-text', style: color: 'black', posizione: 'absolute', top: '45% ', a sinistra: '50%', padding: 0, margin: 0, transform: null, step: (state, shape) => shape.path.setAttribute ("stroke ", state.color); shape.path.setAttribute (" larghezza del tratto ", state.width); shape.setText (Math.round (shape.value () * 100) + '%');); semiBar.animate (0.75, duration: 2000); A volte, potresti voler creare barre di avanzamento con forme diverse che corrispondono al tema generale del tuo sito web. ProgressBar.js ti permette di creare barre di avanzamento con forme personalizzate usando il Sentiero() metodo. Questo metodo funziona come Forma() ma fornisce meno parametri per personalizzare l'animazione della barra di avanzamento. Puoi ancora fornire un durata e facilitando valore per l'animazione. Se si desidera animare il colore e la larghezza del tratto utilizzato per tracciare il percorso personalizzato, è possibile farlo all'interno di a partire dal e a parametri.
La libreria non fornisce alcun modo per tracciare una traccia per il percorso personalizzato, come è avvenuto per linee e cerchi semplici. Tuttavia, puoi creare il sentiero da te abbastanza facilmente. Nell'esempio seguente, ho creato una barra di avanzamento triangolare usando il Sentiero() metodo.
Prima di scrivere il codice JavaScript, dovremo definire il nostro percorso SVG personalizzato in HTML. Ecco il codice che ho usato per creare un triangolo semplice:
Avrai notato che ho creato due diversi elementi del percorso. Il primo percorso ha un colore grigio chiaro che si comporta come la traccia che abbiamo visto con semplici barre di avanzamento nella sezione precedente. Il secondo percorso è quello che animiamo con il nostro codice. Abbiamo dato un id che viene utilizzato per identificarlo nel codice JavaScript qui sotto.
var path = new ProgressBar.Path ("# triangle", duration: 6000, da: color: "# ff0000", width: 2, a: color: "# 0099ff", width: 10, strokeWidth: 4, easing: "easeInOut", step: (state, shape) => shape.path.setAttribute ("stroke", state.color); shape.path.setAttribute ("larghezza del tratto", state.width); ); path.animate (1); Come hai visto in questo tutorial, ProgressBar.js ti consente di creare facilmente diversi tipi di barre di avanzamento con facilità. Ti dà anche la possibilità di animare diversi attributi della barra di avanzamento come la sua larghezza e colore.
Non solo, ma è anche possibile utilizzare questa libreria per modificare il valore di un elemento di testo di accompagnamento al fine di mostrare il progresso in forma testuale. Questo tutorial copre tutto ciò che è necessario sapere per creare semplici barre di avanzamento. Tuttavia, è possibile consultare la documentazione per ulteriori informazioni sulla libreria.
.
