jQueryのprogressbarでなんちゃってプログレスバーを実装してみた

初投稿します :confetti_ball: 
間違いなどあればご指摘お願いします。

# 概要
あるWebAPIのLoading用に、画像を表示させていましたが、
プログレスバーにできないか？と依頼を受けたので実装しました。

画面の構成は、親ウィンドウと子ウィンドウでできています。
親ウィンドウから子ウィンドウを開いて、WebAPIが成功すると子ウィンドウを特定のURLに遷移させます。
この子ウィンドウでWebAPIが成功するまでの間、プログレスバーを表示したいです。
※上記の構成は珍しいと思いますが、読み替え可能だと思います。

# コード
##親ウィンドウ側のjs

```js:launch.js
        plugin.launchProgress = function() {
            var dfd = $.Deferred();

            //キャプションを設定
            //sub_windowは子ウィンドウのオブジェクト
            sub_window.$("#progressArea .progressCaption").text('生成中');

            try {
                //10秒間でプログレスバーの進捗をアニメーションします
                sub_window.$("#progressbar .ui-progressbar-value").animate({width:'100%'}, 10000, 'linear');
                dfd.resolve();
            } catch(e) {
                dfd.reject();
            }

            return dfd.promise();
        };
        
        plugin.startProgress = function() {
            //多重実行の防止
            if (!started_progress) {
                started_progress = true;
                plugin.launchProgress().always(function(){
                    started_progress = false;
                });
            }
        };
```

多重実行の防止のためにDeferredを使用しています。
こちらは初めて使ってみました。

##子ウィンドウ側

```html:progress.html
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/css/progress.css"/>
    <script type="text/javascript" src="/common/js/jquery.js"></script>
    <script type="text/javascript" src="/common/js/jquery-ui-1.10.3.custom.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#progressbar").progressbar({var:false});
            $("#progressbar").progressbar("value", 0.0001); //非常に小さな値で初期化してアニメーションの準備をする

            if (window.opener) window.opener.Launch.startProgress();

            //0.1秒に1回キャプションを更新する
            var textUpdate = function(callback) {
                var percent = Math.floor($("#progressbar .ui-progressbar-value").width() / $("#progressbar").width() * 100);
                $('.progressText').text(percent + '%');
                setTimeout(function(){
                    textUpdate(callback);
                },100);
            };

            textUpdate(textUpdate);
        });
    </script>
</head>
<body>
<div id="progressArea">
    <div class="progressCaption"></div>
    <div id="progressbar">
        <div class="progressText"></div>
    </div>
</div>
</body>
</html>
```

子ウィンドウでは表示エリアを用意して、親ウィンドウから子ウィンドウを操作しています。

##CSS
```css:progress.css
body {
    background-color:lightgray;
}
#progressArea {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    text-align: center;
    height: 4em;
}
#progressArea .progressCaption {
    text-align: center;
    height: 2em;
    color: darkslategray;
}
#progressbar {
    border: 1px solid #becc88;
    color: #62840c;
    background-color: white;
    border-radius: 3px;
    height: 2em;
    width: 95%;
    margin: auto;
}
#progressbar .progressText {
    position: absolute;
    top: 2.5em;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    text-align: center;
}
#progressbar .ui-widget-header {
    background: #cedc98;
}
.ui-progressbar .ui-progressbar-value {
    margin: 0px;
}
```

jquery-ui-1.10.3.custom.cssにもprogressbarの定義がありましたがこれは使用すべきかどうか謎でした。
子ウィンドウのプログレスバーは画面中央に表示します。


#追記 2016-01-08
「なんちゃって」な実装とWebAPI完了の速度に差があったため、
この実装は没となりました :astonished: