Rediseño de cargadores de Google en CSS puro

Vista prévia

Descripción

Una librería CSS pura que recrea los indicadores de carga de Google (cargadores, Spinners de carga) con CSS/CSS3 puro.

See also:

• 10 mejor carga Spinner/indicador JavaScript & bibliotecas CSS

Funcionamiento

Cargue el CSS ' style. css ' incluido en la sección head del documento.

<link rel="stylesheet" href="style.css">

O incluya un cargador CSS de su elección en el documento.

<link rel="stylesheet" href="/animation-1/style.css">
<link rel="stylesheet" href="/animation-2/style.css">
<link rel="stylesheet" href="/animation-3/style.css">
<link rel="stylesheet" href="/animation-4/style.css">
<link rel="stylesheet" href="/animation-5/style.css">
<link rel="stylesheet" href="/animation-6/style.css">

Crea el HTML para sostener los cargadores de Google.

<div class="animation-1">

<div class="shape shape1"></div>

<div class="shape shape2"></div>

<div class="shape shape3"></div>

<div class="shape shape4"></div>
</div>

<div class="animation-2">

<div class="shape shape1"></div>

<div class="shape shape2"></div>

<div class="shape shape3"></div>

<div class="shape shape4"></div>
</div>

<div class="animation-3">

<div class="shape shape1"></div>

<div class="shape shape2"></div>

<div class="shape shape3"></div>

<div class="shape shape4"></div>
</div>

<div class="animation-4">

<div class="shape shape1"></div>

<div class="shape shape2"></div>

<div class="shape shape3"></div>

<div class="shape shape4"></div>
</div>

<div class="animation-5">

<div class="shape shape1"></div>

<div class="shape shape2"></div>

<div class="shape shape3"></div>

<div class="shape shape4"></div>
</div>

<div class="animation-6">

<div class="shape shape1"></div>

<div class="shape shape2"></div>

<div class="shape shape3"></div>

<div class="shape shape4"></div>
</div>