Dot dotdot dotdotdot as loading?
<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
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
Example: https://codepen.io/lukaszkups/pen/NQjeVN
You can animate css content
too!
// 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: ''