Dot dotdot dotdotdot as loading?
JavascriptCssAnimationLoadingJavascript Problem Overview
I wanna create some loading dots, like this:
At 0000 miliseconds the span content is: .
At 0100 miliseconds the span content is: ..
At 0200 miliseconds the span content is: ...
In a loop.
What is the best / easiest way to make it?
Javascript Solutions
Solution 1 - Javascript
<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
Solution 2 - Javascript
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;}}
Solution 3 - Javascript
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>
Solution 4 - Javascript
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);
Solution 5 - Javascript
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.
This is a test
Solution 6 - Javascript
let span = document.querySelector('span');
i = 0;
setInterval(() => {
span.innerText = Array(i = i > 2 ? 0 : i + 1).fill('.').join('');
}, 500)
loading<span></span>
Solution 7 - Javascript
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.
Solution 8 - Javascript
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