当前位置：文江博客话题详情

点点点点点点加载？

发布于 2024-10-10 23:27:03 字数 186 浏览 7 评论 0原文

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

在 0000 毫秒处，跨度内容为： .

在 0100 毫秒处，跨度内容为： ..

在 0200 毫秒处，跨度内容为: ...

在循环中。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时常饿 2024-10-17 23:27:04

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

<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 3 ) 
        wait.innerHTML = "";
    else 
        wait.innerHTML += ".";
    }, 100);
</script>

或者你可以变得更奇特，让它们前进和后退：

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

或者你可以让它们随机地前后前进：

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

或者我可以得到生活并停止发布额外的片段.... :D

正如 Ivo 在评论中所说，你需要在某个时刻清除间隔，特别是在等待完成后不加载新页面的情况下。：D

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

<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 3 ) 
        wait.innerHTML = "";
    else 
        wait.innerHTML += ".";
    }, 100);
</script>

Or you can get fancy and have them go forward and back:

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

Or you could make them go back and forth randomly:

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

Or I could get a life and stop posting additional snippets.... :D

As Ivo said in the comments, you need to clear the interval at some point, especially if you are not loading a new page after the waiting is finished. :D

回复收藏 0 原文

长安忆 2024-10-17 23:27:04

或者..您可以使用 CSS 来完成;)

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

Codepen 示例

Or.. you can do it with CSS ;)

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

Codepen sample

回复收藏 0 原文

自找没趣 2024-10-17 23:27:04

示例： https://codepen.io/lukaszkups/pen/NQjeVN

您可以对 css 进行动画处理 内容也！

p span:before {
    animation: dots 2s linear infinite;
    content: '';
  }

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

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

Example: https://codepen.io/lukaszkups/pen/NQjeVN

You can animate css content too!

p span:before {
    animation: dots 2s linear infinite;
    content: '';
  }

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

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

回复收藏 0 原文

北恋 2024-10-17 23:27:04

这与 Veiko Jääger 的解决方案类似。使用此解决方案，点的颜色与其关联的文本相同。

<html>
<head>
    <style>
.appendMovingDots:after {
    content: ' .';
    animation: dots 3s steps(1, end) infinite;
}
@keyframes dots {
    0%, 12.5% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    37.5% {
        text-shadow: .5em 0;
    }
    50% {
        text-shadow: .5em 0, 1em 0;
    }
    62.5% {
        text-shadow: .5em 0, 1em 0, 1.5em 0;
    }
    75% {
        text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0;
    }
    87.5%, 100%{
        text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0, 2.5em;
    }
}	
		</style>
	</head>
	<body>	
		<span class="appendMovingDots" style="font-size:20px">This is a test</span>	
	</body>
</html>

This is similar to Veiko Jääger's solution. With this solution, the color of the dots is the same as the text it associates with.

<html>
<head>
    <style>
.appendMovingDots:after {
    content: ' .';
    animation: dots 3s steps(1, end) infinite;
}
@keyframes dots {
    0%, 12.5% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    37.5% {
        text-shadow: .5em 0;
    }
    50% {
        text-shadow: .5em 0, 1em 0;
    }
    62.5% {
        text-shadow: .5em 0, 1em 0, 1.5em 0;
    }
    75% {
        text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0;
    }
    87.5%, 100%{
        text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0, 2.5em;
    }
}	
		</style>
	</head>
	<body>	
		<span class="appendMovingDots" style="font-size:20px">This is a test</span>	
	</body>
</html>

回复收藏 0 原文

电影里的梦 2024-10-17 23:27:04

示例： http://jsfiddle.net/subTZ/

var span = document.getElementById('myspan');

var int = setInterval(function() {
    if ((span.innerHTML += '.').length == 4) 
        span.innerHTML = '';
    //clearInterval( int ); // at some point, clear the setInterval
}, 100);

Example: http://jsfiddle.net/subTZ/

var span = document.getElementById('myspan');

var int = setInterval(function() {
    if ((span.innerHTML += '.').length == 4) 
        span.innerHTML = '';
    //clearInterval( int ); // at some point, clear the setInterval
}, 100);

回复收藏 0 原文

网名女生简单气质 2024-10-17 23:27:04

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

loading<span></span>

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

loading<span></span>

回复收藏 0 原文

最美不过初阳 2024-10-17 23:27:04

在我看来，最简单的方法是 if/else 语句。

然而，计算点长度的一些数学知识和著名的Array.join-hack来重复点字符，也应该可以解决问题。

function dotdotdot(cursor, times, string) {
  return Array(times - Math.abs(cursor % (times * 2) - times) + 1).join(string);
}

var cursor = 0;
setInterval(function () {
  document.body.innerHTML = dotdotdot(cursor++, 3, '.')
}, 100);

您可以通过将“向上和向下计数”部分和“字符串重复”包装在单独的函数中来稍微提高可读性。

In my mind, the easiest way is an if/else statement.

However, a bit math to calculate the dots-length and the famous Array.join-hack to repeat the dot-char, should do the trick too.

function dotdotdot(cursor, times, string) {
  return Array(times - Math.abs(cursor % (times * 2) - times) + 1).join(string);
}

var cursor = 0;
setInterval(function () {
  document.body.innerHTML = dotdotdot(cursor++, 3, '.')
}, 100);

You could improve the readability a bit, by wrapping the "count-up-and-down"-part and "string-repetition" in separate functions.

回复收藏 0 原文

向地狱狂奔 2024-10-17 23:27:04

使用 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() 目前在 中不支持 IE11

With String.prototype.repeat() you can do:

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)

Note: String.prototype.repeat() is currently not supported in < IE11

回复收藏 0 原文

~没有更多了~