何パーセントか、擬似ローディングでそれっぽく見せる

#概要
ローディングや制作過程率などが取得出来ない…けど、今何％か数値を出したい。ユーザー離脱率を下げたい…。っていう時の擬似的ローディングです。
実際はサーバーから処理が終わったかをtrue or falseで貰うだけです。
ローディングに大体何秒くらいで完了しそうか設定して、そこで99%になるように数字を繰り上げていきます。
処理が終わったら一気に100%までドーンと上げます。それまでは99%止まりです。

#サンプル
http://codepen.io/key055/full/kXZEXO/

#ソース

```
startLoading();

function startLoading(){
  var time = 0,
  num = 2,
  $loading = $("#loading"),//ローディング画面全体
  $loding_percent = $(".percent"), // 何％かを代入する場所
  videocheckAPI = "/API/videochack/", //api url
  loopno= 0,
  nowParcent=0,
  nowState = 0, // state: 0 未完了 : 1 完了
  drowingInterval ,
  drowInterludeTime = 1000,//書き換えを行う合間
  drowOverallLatency = 20 * 1000, //全体で何ミリ秒待たせるか,
  NoOfOverallLatency = Math.floor(drowOverallLatency / drowInterludeTime),
  FLG_TEST = true,//APIでの通信を行わない テスト用
  lodingDrowing = setInterval(loopDrowingPar, drowInterludeTime);

  //初回
  checkAPI();

  function loopDrowingPar()
  {
    //loading num
    var goParcent = nowParcent;
    goParcent += 99/NoOfOverallLatency;
    goParcent < 99 ? loadingNumUp(goParcent) : loadingNumUp(99);
  }
  function loadingNumUp(goParcent)
  {
    var flg_num = 7;
    var sa = (goParcent - nowParcent) / flg_num,
    loadingNum = 0;
    clearInterval(drowingInterval);
    drowingInterval = setInterval(function() { drowLodingNum(goParcent); }, 100);
    function drowLodingNum(goParcent)
    {
      loadingNum++;
      var par = Math.floor(nowParcent + sa*loadingNum);
      $loding_percent.text(par);
      $loading.css("background-color","rgba(25,25,112," + par / 100+")");
      // $loading.css("background-color","rgba(25,25,112, 0.5)");
      // $loading.css("background-color","yellow");
      if(loadingNum >= flg_num)
      {
        //最後
        $loding_percent.text(Math.floor(goParcent));
        nowParcent = goParcent;
        clearInterval(drowingInterval);
      }
    }
  }
  function checkAPI(){
    if(FLG_TEST) //テスト用
    {
      console.log(time);
      if(time > 9)
      {
        setResult({answer:true});
      }else{
        time += num;
        setTimeout(checkAPI, time * num  * 300);
      }
      return false;
    }
    $.ajax({
      type: "post",
      async: true,//同期
      url: videocheckAPI,
      data: { test: 1 },
      dataType: "json"
    }).done(function(data){
        if(data.answer)
        {
          setResult(data);
        }else{
          time += num;
          setTimeout(checkAPI, time * num  * 300)
        }
    }).error(function(){
      console.log("エラー発生！");
      return false;
    });
  }
  function setResult(data)
  {
    //完了した時の処理
    clearInterval(lodingDrowing);
    loadingNumUp(100);
    console.log(data);
    alert("制作完了しました！")
  }
}


```
作ったやつの情報を適当に書き換えたものなので、
これで動作されるかは分からない。
多分しないかな。

#応用
##ショッピングカートの中の数値変更の時とか。

```
function reloadSum() {
    //数の合計金額を出す
    var sum = GOODS.getCartSum(); //合計金額を出す関数読み込み
    var loop = 0,
        loopNum = 10, //全10回に分けてUPする
        prevPrice = getPrice(),//合計金額が変わる前の数値
        kuriagari = (sum - prevPrice) / loopNum;
    drowing();

    function drowing() {
        var num = prevPrice + kuriagari * ++loop;
        if (loop == loopNum) num = sum;
       $sumPrice.html(_that.decoNum(Math.floor(num)));//適当なhtmlに記載
        if (loop < loopNum) {
            setTimeout(drowing, 30); //書き込み繰り返し。数値が小さいほど、書き換わるスピードが早い。
        }
    }
}
```