Javascript 点作为加载点？

我想创建一些加载点，如下所示：

0000毫秒时，量程内容为：

0100毫秒时，量程内容为：

。

0200毫秒时，量程内容为：

…

在一个循环中

---

最好/最简单的方法是什么？

示例：

。
var dots=window.setInterval（函数（）{
var wait=document.getElementById（“wait”）；
如果（wait.innerHTML.length>3）
wait.innerHTML=“”；
其他的
wait.innerHTML+=”；
}, 100);

---

或者，你可以想象一下，让它们前后移动：

<span id="wait">.</span>

<script>
    window.dotsGoingUp = true;
    var dots = window.setInterval( function() {
        var wait = document.getElementById("wait");
        if ( window.dotsGoingUp ) 
            wait.innerHTML += ".";
        else {
            wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
            if ( wait.innerHTML === "")
                window.dotsGoingUp = true;
        }
        if ( wait.innerHTML.length > 9 )
            window.dotsGoingUp = false;



        }, 100);
    </script>

。
window.dotsGoingUp=true；
var dots=window.setInterval（函数（）{
var wait=document.getElementById（“wait”）；
如果（window.dotsGoingUp）
wait.innerHTML+=”；
否则{
wait.innerHTML=wait.innerHTML.substring（1，wait.innerHTML.length）；
如果（wait.innerHTML==“”）
window.dotsGoingUp=true；
}
如果（wait.innerHTML.length>9）
window.dotsGoingUp=false；
}, 100);

或者你可以让他们随机来回：

<span id="wait">.</span>

<script type="text/javascript">
    var dots = window.setInterval( function() {
        var wait = document.getElementById("wait");
        if ( Math.random() < .7 )
            wait.innerHTML += ".";
        else
            wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
        }, 100);
</script>

。
var dots=window.setInterval（函数（）{
var wait=document.getElementById（“wait”）；
if（Math.random（）<.7）
wait.innerHTML+=”；
其他的
wait.innerHTML=wait.innerHTML.substring（1，wait.innerHTML.length）；
}, 100);

或者我可以得到一条生命，不再发布更多的片段D

---

正如Ivo在评论中所说，您需要在某一点上进行修改，尤其是在等待结束后没有加载新页面的情况下D

或。。您可以使用CSS；）

加载

.装货：在{ 内容：‘’； 动画：点1步（5，结束）无限； } @关键帧点{ 0%, 20% { 颜色：rgba（0,0,0,0）； 文本阴影： .25em 0 rgba（0,0,0,0）， .5em 0 rgba（0,0,0,0）；} 40% { 颜色：白色； 文本阴影： .25em 0 rgba（0,0,0,0）， .5em 0 rgba（0,0,0,0）；} 60% { 文本阴影： .25em 0 0白色， .5em 0 rgba（0,0,0,0）；} 80%, 100% { 文本阴影： .25em 0 0白色， .5em 0 0白色；}

---

在我看来，最简单的方法是使用

if

/

else

语句

然而，一点数学来计算点的长度和著名的

数组


函数点（光标、时间、字符串）{
返回数组（times-Math.abs（游标%（times*2）-times）+1）；
}
var=0；
setInterval（函数（）{
document.body.innerHTML=dotdot（光标++，3'。）
}, 100);这类似于Veiko Jäger的解决方案。使用此解决方案，点的颜色与其关联的文本相同



.appendMovingDots:之后{
内容：‘’；
动画：点3步（1，结束）无限；
}
@关键帧点{
0%, 12.5% {
不透明度：0；
}
25% {
不透明度：1；
}
37.5% {
文本阴影：.5em 0；
}
50% {
文本阴影：.5em 0，1em 0；
}
62.5% {
文本阴影：5em 0、1em 0、1.5em 0；
}
75% {
文本阴影：5em 0、1em 0、1.5em 0、2em 0；
}
87.5%, 100%{
文本阴影：5em 0、1em 0、1.5em 0、2em 0、2.5em；
}
}	
这是一个测试
示例：

你也可以设置css
内容的动画

// HTML
<p>Loading<span></span></p>

// CSS (nested SASS)
p
  span
    &:before
      animation: dots 2s linear infinite
      content: ''

  @keyframes dots
    0%, 20%
      content: '.'
    40%
      content: '..'
    60%
      content: '...'
    90%, 100%
      content: ''

//HTML
装载

//CSS（嵌套的SASS）
P
跨度
&：之前
动画：点2s线性无限
内容：“”
@关键帧点
0%, 20%
内容：'.'
40%
内容：“…”
60%
内容：“…”
90%, 100%
内容：“”
使用
String.prototype.repeat（）
您可以执行以下操作：

var element = document.querySelector(...);
var counter = 0;

var intervalId = window.setInterval(function() {
    counter += 1
    element.innerHTML = '.'.repeat(1 + counter % 3)
}, 350);

// Use the following to clear the interval
window.clearInterval(intervalId)

注意：
String.prototype.repeat（）
当前在中不受支持，如果您只需在span内容中添加“.”每100ms，它是否有效？span.innerHTML+=”；我喜欢这个直观的标题。非常好的标题！！！是的，但过一段时间后就会产生。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。很长的跨度。在3个点之后，我如何才能清除它？@Thew:每次只需测试
innerHTML
的
length
，然后使用我附带的
clearInterval
。我不知道你只想要3个。现在让间隔一直持续下去有什么意义呢？有3个点吗？；）@伊沃：嗯。。。当有三个点时，它会回到零。等等用于加载动画或其他内容。@thejh-Hm？啊。。。另一个答案上有一条更新评论，总是喜欢不完整/措词错误的问题。在React应用程序中有没有使用此选项的方法？最好的方法是使用css，请参阅下一个答案是否与旧浏览器兼容？@BabuJames“What”是旧的？IE8之类的？不，遗憾的是没有！你如何使它更快？真的很漂亮很干净way@MoneceSolis将
1s
更改为
0.5s
以使其运行更快这是一个简单而有效的解决方案。谢谢！我甚至为此写了一篇博文：D
<p class="loading">Loading</p>

.loading:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}}

// HTML
<p>Loading<span></span></p>

// CSS (nested SASS)
p
  span
    &:before
      animation: dots 2s linear infinite
      content: ''

  @keyframes dots
    0%, 20%
      content: '.'
    40%
      content: '..'
    60%
      content: '...'
    90%, 100%
      content: ''

let span = document.querySelector('span');
    i = 0;

setInterval(() => {
    span.innerText = Array(i = i > 2 ? 0 : i + 1).fill('.').join('');
}, 500)

var element = document.querySelector(...);
var counter = 0;

var intervalId = window.setInterval(function() {
    counter += 1
    element.innerHTML = '.'.repeat(1 + counter % 3)
}, 350);

// Use the following to clear the interval
window.clearInterval(intervalId)