Barra de progreso de gradiente de estilo iOS con CSS puro/CSS3
| Autor: | m412c0 |
|---|---|
| Views Total: | 6,474 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 15, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una barra animada de progreso inspirada en iOS, realizada con CSS puro y CSS3.
Funcionamiento
Incluya prefixfree. min. js en el documento para que < span style = "color: #545454;" > solo puede usar propiedades CSS3 no prefijas en todas partes.
<script src="prefixfree.min.js"></script>
Cree el código HTML para la barra de progreso.
<div class="progress"> <div class="progress-bar"> <div class="progress-shadow"></div> </div> </div>
Estilo de la barra de progreso.
.progress-bar {
animation-duration: 3s;
animation-name: width;
background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
background-size: 24em 0.25em;
height: 100%;
position: relative;
} Agregue una sombra a la barra de progreso.
.progress-shadow {
background-image: linear-gradient(to bottom, #eaecee, transparent);
height: 4em;
position: absolute;
top: 100%;
transform: skew(45deg);
transform-origin: 0 0;
width: 100%;
} Anime la barra de progreso con los fotogramas clave CSS3.
@keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
