The*_*hew 41 javascript css animation loading
我想创建一些加载点,像这样:
在0000毫秒时,跨度内容为: .
在0100毫秒时,跨度内容为: ..
在0200毫秒时,跨度内容为: ...
在循环中.
什么是最好/最简单的方法？
Gor*_*son 52
<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
Vei*_*ger 42
或者..你可以用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;}}
示例：https : //codepen.io/lukaszkups/pen/NQjeVN
您也可以为 css 设置动画content！
// 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: ''
这类似于 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>示例： 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);