Is there anyway to animate an ellipsis with CSS animations?
CssCss AnimationsCss Problem Overview
I'm trying to have an ellipsis animate, and was wondering if it was possible with CSS animations...
So it might be like
Loading...
Loading..
Loading.
Loading...
Loading..
And basically just continue like that. Any ideas?
Edit: like this: http://playground.magicrising.de/demo/ellipsis.html
Css Solutions
Solution 1 - Css
How about a slightly modified version of @xec's answer: http://codepen.io/thetallweeks/pen/yybGra
HTML
A single class added to the element:
<div class="loading">Loading</div>
CSS
Animation that uses steps
. See MDN docs
.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;
}
}
@xec's answer has more of a slide-in effect on the dots, while this allows the dots to appear instantly.
Solution 2 - Css
You could try to use the animation-delay property
and time each ellipsis character. In this case I've put each ellipsis character in a <span class>
so I can animate them separately.
I made a demo, which isn't perfect, but it shows at least what I mean :)
The code from my example:
HTML
Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span>ā
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;
}
}
Solution 3 - Css
Even a more simple solution, works pretty well!
<style>
.loading::after {
display: inline-block;
animation: dotty steps(1,end) 1s infinite;
content: '';
}
@keyframes dotty {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
</style>
<div class="loading">Loading</div>
Just edited the content with animation instead of hiding some dots...
Demo here: https://jsfiddle.net/f6vhway2/1/
Edit:
Thanks to @BradCollins for pointing out that content
is not an animatable property.
Currently, (2021) this works in Chrome/WebKit/Blink/Electron and Firefox and new version of Edge.
Solution 4 - Css
Short answer is "not really". However, you can play around with animating width and overflow hidden, and maybe get an effect that is "close enough". (code below tailored for firefox only, add vendor prefixes as needed).
html
<div class="loading">Loading</div>
css
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-moz-animation: ellipsis 2s infinite;
content: "\2026"; /* ascii code for the ellipsis character */
}
@-moz-keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}
demo: http://jsfiddle.net/MDzsR/1/
edit
It appears chrome has issues with animating the pseudo-element. An easy fix is to wrap the ellipsis in its own element. Check out http://jsfiddle.net/MDzsR/4/
Solution 5 - Css
A late addition but I found a way to do this which supports centered text.
<element>:after {
content: '\00a0\00a0\00a0';
animation: progress-ellipsis 5s infinite;
}
@keyframes progress-ellipsis {
0% {
content: '\00a0\00a0\00a0';
}
30% {
content: '.\00a0\00a0';
}
60% {
content: '..\00a0';
}
90% {
content: '...';
}
}
Solution 6 - Css
You can animate clip
(or better clip-path
if you don't need IE support)
div {
position: relative;
display: inline-block;
font-size: 1.4rem;
}
div:after {
position: absolute;
margin-left: .1rem;
content: ' ...';
display: inline-block;
animation: loading steps(4) 2s infinite;
clip: rect(auto, 0px, auto, auto);
}
@keyframes loading {
to {
clip: rect(auto, 20px, auto, auto);
}
}
<div>Loading</div>
Solution 7 - Css
Well Actually there is a pure CSS way of doing this.
I got the example from CSS Tricks, but made it also to be supported in Internet Explorer (I have tested it in 10+).
Check the Demo: http://jsfiddle.net/Roobyx/AT6v6/2/
HTML:
<h4 id="searching-ellipsis"> Searching
<span>.</span>
<span>.</span>
<span>.</span>
</h4>
CSS:
@-webkit-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
@-moz-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
@-webkit-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
@-moz-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
@-o-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
@keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
#searching-ellipsis span {
-webkit-animation-name: opacity;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: opacity;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-ms-animation-name: opacity;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: infinite;
}
#searching-ellipsis span:nth-child(2) {
-webkit-animation-delay: 100ms;
-moz-animation-delay: 100ms;
-ms-animation-delay: 100ms;
-o-animation-delay: 100ms;
animation-delay: 100ms;
}
#searching-ellipsis span:nth-child(3) {
-webkit-animation-delay: 300ms;
-moz-animation-delay: 300ms;
-ms-animation-delay: 300ms;
-o-animation-delay: 300ms;
animation-delay: 300ms;
}
Solution 8 - Css
Here is my solution with pure css https://jsfiddle.net/pduc6jx5/1/ explained: https://medium.com/@lastseeds/create-text-ellipsis-animation-with-pure-css-7f61acee69cc
scss
.dot1 {
animation: visibility 3s linear infinite;
}
@keyframes visibility {
0% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.dot2 {
animation: visibility2 3s linear infinite;
}
@keyframes visibility2 {
0% {
opacity: 0;
}
21% {
opacity: 0;
}
22% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.dot3 {
animation: visibility3 3s linear infinite;
}
@keyframes visibility3 {
0% {
opacity: 0;
}
43% {
opacity: 0;
}
44% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
html
Loading <span class="dot dot1">.</span><span class="dot dot2">.</span><span class="dot dot3">.</span>