ローダーに進捗を

ファイルのアップロードなんかをするときのクルクルに進捗を付けてみます

ui-loaderクラスを探してプログレスバー替りのdivを挿入します
ui-progress-loadingクラスをでっちあげておきます
あとは$.ajaxSettings.xhr()でとれた値に合わせて幅を変更するだけです
何時、どれだけ進むかは解りません
なすがままです

cm.ts

    /*
     * AJAX進捗表示
     */
    export function ajaxLoaderProgress() {
        let x = $.ajaxSettings.xhr();
        if (x.upload) {
            x.upload.addEventListener("progress", loaderProgress, false);
        }
        return x;
    }

    export function loaderProgress(e: any) {
        let loader = $(".ui-loader");

        let progress = loader.children(".ui-progress-loading");
        if (progress.length <= 0) {
            progress = $("<div class='ui-progress-loading'></div>");
            loader.append(progress);
        }

        let v = Math.floor((e.loaded / e.total * 10000) / 100);
        progress.width(v + "%");
    }

cm.css

  div.ui-loader > div.ui-progress-loading {
    width: 0;
    height: 1em;
    background-color: #ccc;
    margin: 0.3em;
  }

使い方1

  $.ajax({
    xhr: cm.ajaxLoaderProgress
  })

使い方2

  let xhr = new XMLHttpRequest();
  xhr.onprogress = cm.loaderProgress;