Dotdot dotdot dotdotdot jak ładowanie?

Question

Chcę utworzyć kilka ładowania kropki, jak to:

W 0000 milisekund treść rozpiętość wynosi: .

W 0100 milisekund treść rozpiętość wynosi: ..

W 0200 milisekund treść rozpiętość wynosi: ...

W pętli.

Jaki jest najlepszy/najłatwiejszy sposób na zrobienie tego?

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> 

---

Albo można uzyskać fantazyjny i je iść do przodu i do tyłu:

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

Albo można zrobić im wrócić i losowo:

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

Albo mogę dostać życie i przestać wysyłania dodatkowych fragmentów ....: D

Jak Ivo powiedział w komentarzach, musisz clear the interval w pewnym momencie, zwłaszcza jeśli nie ładujesz nową stronę po zakończeniu oczekiwania. : D

Answer 2

Przykład: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

używam to:

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

.. Albo można to zrobić z 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

W moim umyśle, najprostszym sposobem jest instrukcja if/else.

Jednak trochę matematyki, aby obliczyć długość kropek i słynny Array.join - hack, aby powtórzyć kropkę-char, powinien zrobić lewę też.

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

Można by poprawić czytelność nieco, owijając "Count-up-and-down" -part i "string-powtórzenia" w oddzielnych funkcjach.