Punctuation loading “animation”, javascript?

Question

I\'m looking for a good way to display some punctuation loading \"animation\".

What I want is something like this:

This will display at second 1: \"Waiti         


        

Answer 1

Pure CSS solution

Demo: jsfiddle.net/feklee/D59P9

• HTML:

  Waiting... for more.
  

• CSS:

  @keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } }
  @keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } }
  @keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } }
  @-webkit-keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } }
  @-webkit-keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } }
  @-webkit-keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } }
  
  .dots span {
      animation: dots-1 1s infinite steps(1);
      -webkit-animation: dots-1 1s infinite steps(1);
  }
  
  .dots span:first-child + span {
      animation-name: dots-2;
      -webkit-animation-name: dots-2;
  }
  
  .dots span:first-child + span + span {
      animation-name: dots-3;
      -webkit-animation-name: dots-3;
  }
  

WebKit-only alternative

Advantage: No nested tags. This means that the ellipsis could be put as content into an ::after pseudo element.

Demo: jsfiddle.net/feklee/vFT7W

• HTML:

  Waiting... for more.
  

• CSS:

  body {
      font-family: 'Roboto', sans-serif;
      font-size: 50px;
  }
  
  @-webkit-keyframes dots {
      0% { background-position: 0px; }
      100% { background-position: 50px; }
  }
  
  span {
      background: linear-gradient(to right, white 50%, black 50%);
      color: transparent;
      -webkit-background-clip: text;
      -webkit-animation: dots 1s infinite steps(4);
      padding-right: 40px;
      margin-right: -40px;
  }