9 el mínimo de carga de CSS Spinners

Vista prévia

Descripción

Sin embargo, otra colección de 9 Spinners de carga mínima creadas con CSS/CSS3 puro.

Loading spinners included:

1. Circle
2. Dual Circle
3. Square
4. Bowtie
5. Bowtie (Flip)
6. Signal
7. Triple signal
8. Ring
9. Rings

See also:

• 10 mejor carga Spinner/indicador JavaScript & bibliotecas CSS

Funcionamiento

Instale & descargar los Spinners de carga de CSS.

# Yarn
$ yarn add css-loading-spinners

# NPM
$ npm install css-loading-spinners --save

Importe los Spinners de carga CSS en el documento.

<link href="css-loading-spinners.css" rel="stylesheet">

Agregue Spinners de carga a la Página Web.

<div class="cls-spinner">


<div class="cls-circle cls-spin"></div>

</div>

<div class="cls-spinner">


<div class="cls-dual-circle cls-spin"></div>

</div>

<div class="cls-spinner">


<div class="cls-square cls-flip-flop"></div>

</div>

<div class="cls-spinner">


<div class="cls-bowtie cls-spin"></div>

</div>

<div class="cls-spinner">


<div class="cls-bowtie cls-flip-flop"></div>

</div>

<div class="cls-spinner">


<div class="cls-signal"></div>

</div>

<div class="cls-spinner">


<div class="cls-triple-signal"></div>

</div>

<div class="cls-spinner">


<div class="cls-ring"></div>

</div>

<div class="cls-spinner">


<div class="cls-rings"></div>

</div>

Override the default styles of the loading spinners.

:root {

--cls-color: #558B6E;

--cls-sec-color: #EEEEEE;

--cls-size: 5rem;

--cls-margin: 1rem;

--cls-speed: 2s;
}