Come realizzare un caricatore usando CSS

Durante l'utilizzo di qualsiasi applicazione, a volte potresti dover aspettare per visualizzare il contenuto fino a quando non viene caricato. Per questo, i caricatori in siti Web o applicazioni consentono all'utente di attendere durante la visualizzazione di un po 'di animazione. Su un sito Web, questi caricatori indicano che il sistema non si è schiantato e il contenuto verrà visualizzato dopo un po '. Inoltre, i caricatori animati forniscono un aspetto attraente che aiuta a mantenere l'attenzione dell'utente sul sito Web.

Questo articolo fornirà istruzioni relative alla creazione di un caricatore utilizzando CSS.

Come creare il caricatore usando CSS?

Ai fini della creazione di un caricatore, in primo luogo, in HTML, aggiungere un elemento Div con il nome della classe "caricatore". All'interno di questo elemento, posizionare un altro elemento div con il nome di classe "caricatore-interno".

Html

Ora, passa alla sezione CSS, in cui questi elementi saranno disegnati per creare un caricatore.

CSS

Lo stile che applicheremo è di seguito menzionato.

Stile tutti gli elementi

*
Margine: 0;
imbottitura: 0;
Dimensizzazione di scatole: bordo-box;
Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;

La spiegazione del codice sopra menzionato è elencata di seguito:

• "*"Il simbolo dell'asterisco viene utilizzato per rappresentare tutti i tipi di elementi a cui verranno applicate queste proprietà.
• "margine"La proprietà viene utilizzata per dare spazio attorno a un elemento. Il valore "0"Significa che non ci sarebbe margine attorno a ciascun elemento HTML.
• "imbottitura"La proprietà specifica lo spazio attorno al contenuto dell'elemento.
• "dimensionamento della scatola"Proprietà con il valore"Border-Box"Indicare che il bordo e l'imbottitura sono inclusi nell'altezza e nella larghezza.
• "famiglia di font"Definisce il carattere dell'elemento.

Elemento "corpo" di stile

corpo
Altezza: 100VH;
Background-color: RGB (53, 53, 53);

Le proprietà applicate all'elemento corporeo sono riportate di seguito:

• "altezza"La proprietà viene utilizzata per impostare l'altezza del corpo. L'unità "VH"Rappresenta che inizialmente l'elemento corpore.
• "colore di sfondo"La proprietà imposta il colore di sfondo del corpo.

Stile "caricatore" di stile

.caricatore
Posizione: assoluto;
Top: 50%;
A sinistra: 50%;
Animazione: caricamento-spinner 400ms lineare infinito;

Di seguito è riportata la descrizione delle proprietà applicate al caricatore Div di HTML:

• "posizione"Proprietà con il valore"assoluto"Posizionerà l'elemento del caricatore rispetto ai suoi genitori.
• "superiore"La proprietà imposta la posizione verticale del div.
• "Sinistra"La proprietà imposta la posizione orizzontale del div.
• "animazione"È una proprietà stentata che imposta il nome di animazione, la durata dell'animazione, la funzione di temporizzazione dell'animazione e il ritardo dell'animazione per il caricatore.

Nota: IL "caricamento-spinner"È il nome dell'animazione, che verrà utilizzato nell'animazione @KeyFrames per specificare l'animazione.

Stile "Loader-Inner" Div

.caricatore .caricatore-inner
larghezza: 60px;
Altezza: 60px;
Bordo: 10px trasparente solido;
bordo-top-color: #00C8B1;
Border-Left-Color: #00C8B1;
raggio di frontiera: 50%;

Il bambino di div di caricatore div, con il nome "caricatore-interno"Viene applicato con le proprietà descritte di seguito:

• "larghezza"La proprietà imposta la larghezza dell'elemento.
• "altezza"La proprietà imposta l'altezza dell'elemento.
• "confine"Specifica un bordo con larghezza, tipo di linea e colore.
• "bordo-colore"Aggiunge colore alla parte superiore del bordo.
• "bordo-colore"Aggiunge colore a sinistra del bordo.
• "raggio di confine"Specifica il raggio del bordo e lo fa girare.

Il caricatore viene creato correttamente e sembrerà così:

Imposta i frame dei tasti di animazione del caricatore sopra creato.

Imposta le corde dei tasti di animazione

@KeyFrames Loading-Spinner
0%
trasformazione: rotare (0deg);

100%
Trasformazione: rotazione (360DEG);

I frame chiave in CSS definiscono l'animazione impostando il suo stile a una durata diversa:

• "@KeyFrames Caricamento-spinner": Il nome dell'animazione"caricamento-spinner"Seguita dalla parola chiave @KeyFrames viene utilizzata per impostare l'animazione.
• "0%"Rappresenta l'animazione all'inizio in cui verrà ruotato il caricatore"0" grado.
• "100%"Rappresenta l'animazione alla fine mentre ruota il caricatore a"360" gradi.

Nota: Il nome dell'animazione è specificato nel Div caricatore.

Produzione

Freddo! Abbiamo creato con successo un caricatore animato con CSS.

Conclusione

Sui siti Web, i caricatori sono stati aggiunti per raggiungere l'attenzione dell'utente fino a quando il contenuto non riceve carichi. Esistono diverse proprietà CSS utilizzate per creare caricatori, come "animazione"E impostando i frame dei tasti di animazione usando il"trasformare" proprietà. Questo articolo riguardava la creazione di un caricatore CSS e l'applicazione di animazione ad esso.