este problema se puede tratar de diversas maneras, por lo tanto te damos la que para nosotros es la resolución más completa.
Solución:
¿Qué tal una versión ligeramente modificada de la respuesta de @xec: http://codepen.io/thetallweeks/pen/yybGra
HTML
Una sola clase agregada al elemento:
Loading
CSS
Animación que utiliza steps. Ver documentos de MDN
.loading:after
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-webkit-animation: ellipsis steps(4,end) 900ms infinite;
animation: ellipsis steps(4,end) 900ms infinite;
content: "2026"; /* ascii code for the ellipsis character */
width: 0px;
@keyframes ellipsis
to
width: 20px;
@-webkit-keyframes ellipsis
to
width: 20px;
La respuesta de @xec tiene más un efecto deslizante en los puntos, mientras que esto permite que los puntos aparezcan instantáneamente.
Podrías intentar usar el animation-delay property y el tiempo de cada carácter de puntos suspensivos. En este caso, he puesto cada carácter de puntos suspensivos en un para que pueda animarlos por separado.
Hice una manifestaciónque no es perfecto, pero muestra al menos lo que quiero decir 🙂
El código de mi ejemplo:
HTML
Loading...
CSS
.one
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.0s;
animation: dot 1.3s infinite;
animation-delay: 0.0s;
.two
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.2s;
animation: dot 1.3s infinite;
animation-delay: 0.2s;
.three
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.3s;
animation: dot 1.3s infinite;
animation-delay: 0.3s;
@-webkit-keyframes dot
0%
opacity: 0;
50%
opacity: 0;
100%
opacity: 1;
@keyframes dot
0%
opacity: 0;
50%
opacity: 0;
100%
opacity: 1;
¡Incluso una solución más simple funciona bastante bien!
Loading
Acabo de editar el contenido con animación en lugar de ocultar algunos puntos…
Demostración aquí: https://jsfiddle.net/f6vhway2/1/
Editar:
Gracias a @BradCollins por señalar que content no es una propiedad animable.
https://www.w3.org/TR/css3-transitions/#animatable-css
Entonces, esta es una solución solo para WebKit/Blink/Electron. (Pero también funciona en las versiones actuales de FF)
Puedes asistir nuestra faena escribiendo un comentario y dejando una puntuación te lo agradecemos.