Dot dotdot dotdotdot en chargement?

Question

Je veux créer des points de chargement, comme ceci:

à 0000 miliseconds le contenu span est: .

à 0100 miliseconds le contenu span est: ..

à 0200 miliseconds le contenu span est: ...

Dans une boucle.

Quel est le meilleur moyen de le faire?

Answer 1

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

---

Ou vous pouvez obtenir la fantaisie et de les aller de l'avant et l'arrière:

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

Ou vous pourriez les faire revenir en arrière et au hasard:

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

Ou je pourrais avoir une vie et cesser d'afficher des extraits supplémentaires ....: D

Comme Ivo dit dans les commentaires, vous devez clear the interval à un moment donné, surtout si vous ne chargez pas une nouvelle page après l'attente est terminée. : D

Answer 2

Exemple: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); 

Answer 3

J'utilise ceci:

var dotspan = document.getElementById("loading-dot-dot-dot"); 
var dotdotdot = setInterval(function() { 
    if(dotspan.innerHTML.length == 3) { 
     dotspan.innerHTML = ""; 
    } else { 
     dotspan.innerHTML += "."; 
    } 
}, 250); 

//When loading finished, disable "dotting" 
clearInterval(dotdotdot); 

Answer 4

Ou .. vous pouvez le faire avec 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

Answer 5

Dans mon esprit, la meilleure façon est une déclaration if/else.

Cependant, un calcul de bits pour calculer les points de longueur et de la célèbre Array.join - pirater répéter le point-char, devrait faire l'affaire aussi.

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

Vous pouvez améliorer la lisibilité un peu, en enveloppant le -part "count-up et vers le bas" et "string-répétition" dans des fonctions distinctes.