Javascript 省略号文字加载屏幕

我想做的是制作一个显示一些信息的加载屏幕，以及一个闪烁的椭圆。它看起来像这样，但更生动：

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

函数加载器（div）{
第4节附加（“”）；
load=div.find（“#loader”）；
html（'处理一些数据'）；
周期数=1；
while（$（'#loader'）。长度>0）{
setTimeout（函数（）{
如果（周期数<4）{
numberOfPeriods++；
对于（var i=0；i不要将setTimeout放在循环中。相反，在setTimeout调用的函数顶部测试“完成”条件（测试#loader的长度）。如果未完成，请再次使用setTimeout。如果完成，请调用一个可以移动的函数。
尝试类似的方法

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

函数showLoader（）{
无功负荷；
荷载=$（''）；
$（document.body）.append（load）；
html（'处理一些数据'）；
周期数=1；
间隔=设置间隔（函数（）{
如果（周期数<4）
{
load.html（load.html（）+'）；
numberOfPeriods++；
}
其他的
{
html（'处理一些数据'）；
周期数=1；
}
}, 200);
}
函数hideLoader（）{
间隔时间；
$（“#加载程序”）.remove（）；
}
while（$（'#loader'）.length>0）{
这就是为什么……我想象它将进入一个无限循环，但我不确定如何适当地以x毫秒的时间片循环它。