javascript - 省略号单词加载屏幕

Question

我想做的是制作一个加载屏幕，显示一些消息和闪烁的省略号。它看起来像这样，但更加动画:

Crunching data.
Crunching data..
Crunching data...
Crunching data.
Crunching data..

目前，我有以下代码，但它使网站崩溃，所以我可以公平地假设它不起作用:

function loader(div) {
  div.append('<div id="loader"></div>');
  load = div.find('#loader');
  load.html('Crunching Some Data.');
  numberOfPeriods = 1;
  while($('#loader').length > 0) {
    setTimeout(function() {
      if(numberOfPeriods < 4) {
        numberOfPeriods++;
        for(var i=0; i<numberOfPeriods; i++) {
          load.append('.');
        }
      } else {
        load.html('Crunching Some Data.');
        numberOfPeriods = 1;
      }
    }, 200);
  }
}

如何去做这件事？

Answer 1

尝试这样的事情

function showLoader() {
    var load;
    load = $('<div id="loader"></div>');
    $(document.body).append(load);
    load.html('Crunching Some Data.');
    numberOfPeriods = 1;

    interval = setInterval(function(){
        if(numberOfPeriods < 4)
        {
            load.html(load.html() + '.');
            numberOfPeriods++;
        }
        else
        {
            load.html('Crunching Some Data.');
            numberOfPeriods = 1;
        }
    }, 200);
}

function hideLoader(){
    clearInterval(interval);
    $('#loader').remove();
}