Come realizzare semplici filatori CSS?

Nello sviluppo web, uno spinner può essere utilizzato allo scopo di mostrare lo stato di caricamento della pagina web o di un progetto. Può semplicemente essere progettato tramite le proprietà HTML e CSS. Inoltre, potrebbe non richiedere regole difficili e veloci, come l'utilizzo di JavaScript e altri linguaggi di programmazione. Per farlo, il CSS "raggio di confine"La proprietà può essere utilizzata.

Questo post indicherà come progettare un semplice filatore CSS.

Come realizzare semplici filatori CSS?

Per creare un semplice spinner CSS, prima, creare un contenitore di div e quindi applicare il "raggio di confine" proprietà. Successivamente, applica le particolari proprietà CSS, tra cui "animazione","raggio di confine","trasformare", e altri.

Per implicazioni pratiche, prova i passaggi indicati.

Passaggio 1: crea un contenitore div

Inizialmente, crea un contenitore div con l'aiuto di ""Elemento. Inoltre, inserire un “classe"Attributo con un nome particolare:

Passaggio 2: crea un semplice filatore

Accedi al contenitore creato con l'aiuto del nome della classe e applica le proprietà CSS di seguito:

.spin-container :: prima
Animazione: 1.9em;
Armation-Play-State: eredità;
Bordo: solido 5px #c2dffc;
Margine: 10%;
raggio di frontiera: 50%;
Border-bottom-color: #064e18;
trasformazione: traduzione3d (-50%,-50%, 0);
contenuto: "";
Altezza: 100px;
larghezza: 100px;
Posizione: assoluto;
Top: 40%;
A sinistra: 40%;
Volontà: trasformata;

Qui:

• • "animazione"È una proprietà CSS stensa utilizzata per applicare un'animazione tra gli stili.
  • "stato di animazione-play"Determina se l'animazione è in uno stato in esecuzione o in pausa.
  • "confine"La proprietà definisce un limite attorno a un particolare elemento.
  • "margine"Definisce uno spazio al di fuori del confine definito.
  • "raggio di confine"Specifica il raggio degli angoli dell'elemento.
  • "bordo-colore"Viene utilizzato per impostare il colore sul lato inferiore del confine definito.
  • "trasformare"Trasforma un elemento in modo 2D o 3D. Questa proprietà consente ai suoi utenti di ridimensionare, inclinarsi, muovere e ruotare gli elementi.
  • "contenuto"Viene utilizzato per inserire il testo all'interno dell'elemento.
  • "altezza" E "larghezza"Le proprietà vengono utilizzate per specificare la dimensione dell'elemento.
  • "posizione"Specifica il tipo di metodo di posizionamento dell'elemento.
  • "superiore" E "Sinistra"Proprietà Assegna la posizione dell'elemento.
  • "cambierà"Suggerimenti ai browser su come un elemento potrebbe cambiare.

Si può osservare che il semplice filatore è stato creato e progettato con successo:

Si tratta di creare e styling di un semplice filatore CSS.

Conclusione

Per rendere il semplice spinner CSS, prima, progetta un contenitore di div. Quindi, applica le particolari proprietà CSS, tra cui "animazione","raggio di confine","trasformare","raggio di confine","bordo-colore", e altri. Questo post ha dimostrato il metodo per la progettazione del semplice filatore CSS.