标点符号加载"动画",javascript？

Question

我正在寻找一种显示标点加载"动画"的好方法.

我想要的是这样的:

This will display at second 1: "Waiting for your input."
This will display at second 2: "Waiting for your input.."
This will display at second 3: "Waiting for your input..."
This will display at second 4: "Waiting for your input...."
This will display at second 5: "Waiting for your input."
This will display at second 6: "Waiting for your input.."
This will display at second 7: "Waiting for your input..."
This will display at second 8: "Waiting for your input...."

等等.

我开始围绕点,spans并认为我可以用jquery循环它们并再显示一个,多一个,然后重置为1.但是代码变得非常笨拙,所以我想知道你会怎么做？

Answer 1

制作一串点的技巧是制作一个稀疏数组,然后将所有元素与所需的字符连接起来.

var count = 0;
setInterval(function(){
    count++;
    var dots = new Array(count % 10).join('.');
    document.getElementById('loadingtext').innerHTML = "Waiting for your input." + dots;
  }, 1000);

这是一个现场演示.

Answer 2

纯CSS解决方案

演示:jsfiddle.net/feklee/D59P9

• HTML:

  Waiting<span class="dots"><span>.</span><span>.</span><span>.</span></span> 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唯一的替代方案

优点:没有嵌套标签.这意味着可以将省略号作为内容放入::after伪元素中.

演示:jsfiddle.net/feklee/vFT7W

• HTML:

  Waiting<span>...</span> 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;
  }