Google Loader animado con SVG y CSS

Vista prévia

Descripción

Un Spinner/cargador de carga inspirado en Google que anima a través de cuatro colores, construido usando SVG y CSS/CSS3.

Funcionamiento

Compile la estructura HTML para el cargador con el elemento de círculo SVG.

<div class="loader">

<svg class="circular" viewBox="25 25 50 50">


<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>

</svg>
</div>

Los estilos principales de CSS/CSS3.

.loader {

position: relative;

margin: 0px auto;

width: 100px;
}

.loader:before {

content: '';

display: block;

padding-top: 100%;
}

.circular {

-webkit-animation: rotate 2s linear infinite;

animation: rotate 2s linear infinite;

height: 100%;

-webkit-transform-origin: center center;

-ms-transform-origin: center center;

transform-origin: center center;

width: 100%;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;
}

.path {

stroke-dasharray: 1, 200;

stroke-dashoffset: 0;

-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;

animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;

stroke-linecap: round;
}

Anime el cargador.

@-webkit-keyframes
 rotate {
100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}

@keyframes
 rotate {
100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}

@-webkit-keyframes
 dash {
0% {
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
}
 50% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -35;
}
 100% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -124;
}
}

@keyframes
 dash {
0% {
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
}
 50% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -35;
}
 100% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -124;
}
}

@-webkit-keyframes
 color {
100%, 0% {
 stroke: #d62d20;
}
 40% {
 stroke: #0057e7;
}
 66% {
 stroke: #008744;
}
 80%, 90% {
 stroke: #ffa700;
}
}

@keyframes
 color {
100%, 0% {
 stroke: #d62d20;
}
 40% {
 stroke: #0057e7;
}
 66% {
 stroke: #008744;
}
 80%, 90% {
 stroke: #ffa700;
}
}