iOS & OS X estilo puro CSS cargando Spinner
| Autor: | jmak |
|---|---|
| Views Total: | 7,469 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 31, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Un Spinner de carga basado en CSS/CSS3 puro con superposición de pantalla completa inspirada en iOS de manzanas & OS X.
Funcionamiento
Cree el código HTML para el Spinner de carga envuelto en un contenedor de superposición.
<div class="overlay"> <div class="spinner center"> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> <div class="spinner-blade"></div> </div> </div>
Las reglas de CSS/CSS3 (SASS) para animar el Spinner de carga. Puede cambiar fácilmente el color & tamaño en los mixins.
$spinner-color: #69717d !default
$spinner-size: 48px !default
.overlay
background: rgba(black,.8)
height: 100vh
.spinner
font-size: $spinner-size
position: relative
display: inline-block
width: 1em
height: 1em
&.center
position: absolute
left: 0
right: 0
top: 0
bottom: 0
margin: auto
.spinner-blade
position: absolute
left: .4629em
bottom: 0
width: .074em
height: .2777em
border-radius: .0555em
background-color: transparent
transform-origin: center -.2222em
animation: spinner-fade 1s infinite linear
$animation-delay: 0s
$blade-rotation: 0deg
@for $i from 1 through 12
&:nth-child(#{$i})
animation-delay: $animation-delay
transform: rotate($blade-rotation)
$blade-rotation: $blade-rotation + 30
$animation-delay: $animation-delay + .083
@keyframes spinner-fade
0%
background-color: $spinner-color
100%
background-color: transparent
