140

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

2

10 Answers 10

137

How about a slightly modified version of @xec's answer: http://codepen.io/thetallweeks/pen/yybGra

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: 40px;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 40px;
  }
}
<h1 class="loading">Loading</h1>

@xec's answer has more of a slide-in effect on the dots, while this allows the dots to appear instantly.

6
  • 3
    I mean you did answer this like 3 years later but this is probably better.
    – Rey
    Dec 21, 2015 at 17:41
  • 8
    @xckpd7 yea, but I googled this today and just found this answer. SO isn't just for the OP, it's a resource for all! Dec 21, 2015 at 18:17
  • 1
    @MattParrilla I am the OP, and if you noticed I changed the answer I accept to this one before I made that comment.
    – Rey
    Dec 21, 2015 at 18:51
  • 12
    If you're using this on text that's centred or aligned right, I'd suggest adding an initial margin-right (or padding?) of 20px and animating it to 0px if you don't want your text shifting during the animation.
    – Kimball
    Apr 27, 2016 at 1:10
  • 1em in place of 20px may work better for the CSS in this answer Apr 14, 2020 at 21:10
79

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.

2
  • 1
    I was looking at this thread just last week. Nice simple answer!
    – r8n5n
    Dec 6, 2016 at 9:31
  • 2
    +1 for animating content. To get an even animation rhythm you should use steps(1) and define one extra key frame. The step function dictates the number of steps between key frames and since we're specifying each frame we just want a single step between them. codepen.io/anon/pen/VmEdXj Dec 14, 2016 at 4:54
65

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;
    }
}
5
18

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/

7
  • Not working in Chromium (yes, I changed the vendor-prefix to -webkit from -moz). Oct 22, 2012 at 18:34
  • @DavidThomas you're right - tested in chrome now and it seems it has issues with the pseudo element. You could wrap the ellipsis in its own element and animate that instead (would work in firefox too) jsfiddle.net/MDzsR/4
    – xec
    Oct 23, 2012 at 7:52
  • 1
    Really nice solution, and just perfect for a Firefox OS app that I'm developing. Tweaked it a little bit: jsfiddle.net/feklee/x69uN
    – feklee
    Jun 24, 2014 at 9:37
  • 1
    Here's an improved version that works on Chrome, as well as works correctly with non-left aligned elements (doesn't change the width). Also, it shows each dot consecutively, without this sliding revealing artifact: jsfiddle.net/fze2qxsv Jun 6, 2020 at 20:28
  • @AaylaSecura The accepted answer has a cleaner solution using steps instead stackoverflow.com/a/28074607/833146
    – xec
    Jul 3, 2020 at 12:52
9

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: '...';
    }
}
1
  • I would place the percentages evenly apart, 0%, 25%, 50%, 75%, then set the easing function to linear. Easier to understand. Sep 13, 2022 at 12:48
4

You can animate clip (or better clip-path if you don't need IE support)

div {
  display: inline-block;
  font-size: 1.4rem;
}

div:after {
  position: absolute;
  margin-left: .1rem;
  content: ' ...';
  animation: loading steps(4) 2s infinite;
  clip: rect(auto, 0px, auto, auto);
}

@keyframes loading {
  to {
    clip: rect(auto, 20px, auto, auto);
  }
}
<div>Loading</div>

3

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;
}
3
  • You are adding proprietary IE-only filters in mozilla-specific and webkit-specific keyframes. How is this an improvement over the already accepted solution? It even has the same issue (in frames 4 and 5 only the two last and very last dots are visible, respectively, as opposed to what is outlined in the question, which has 3 repeating states, not 5)
    – xec
    May 14, 2014 at 21:41
  • The question is about creating loading dots, and there is just a near example, not mandatory. What I have added is prefixes, so IE can recognize it better and display it.
    – MRadev
    May 29, 2014 at 11:59
  • 4
    -webkit-keyframes will only apply to webkit, and inside you have IE-only code. This code does nothing but waste space.
    – xec
    May 30, 2014 at 9:17
1

I found clip-path to be the cleanest, with the following benefits:

Does not use width, thus:

  • works independent of how wide the ellipsis is in whatever font is used.
  • Does not shift the layout (good for performance, and allows more text behind it without that moving around or reflow).

.loading-ellipsis:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis-animation steps(1,end) 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
    /* Enable this to see what is going on: */
    /* background-color: red; */
}

@keyframes ellipsis-animation {
    0%  { clip-path: inset(0 100% 0 0); }
    25% { clip-path: inset(0 66.6% 0 0); }
    50% { clip-path: inset(0 33.3% 0 0); }
    75% { clip-path: inset(0 0 0 0); }
}
<span class="loading-ellipsis">Loading</span> More text behind it that does not move

Credits go to @AaylaSecura's comment, and I improved that to use steps(1,end). This works because I end the animation at 75%, so that the last step shows the full expansion of the ellipsis (the third dot).

(There is an implicit 100% { clip-path: inset(0 0 0 0); } behind it that need not be written.)

0

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>
0

I did exactly what @CodeBrauer very cleanly did above, but because my text was text-align: center (this works for right, too) and I didn't want the text to move over every time a period was added, I added "punctuation spaces":

<style>
    .loading::after {
      display: inline-block;
      animation: dotty steps(1,end) 1s infinite;
      content: '';
    }
    
    @keyframes dotty {
      0%   { content: '\2008\2008\2008'; }
      25%  { content: '.\2008\2008'; }
      50%  { content: '..\2008'; }
      75%  { content: '...'; }
      100% { content: '\2008\2008\2008'; }
    }
</style>
<div class="loading">Loading</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.