PHPとBootstrap3でプログレスバーの表示

PHPとBootstrap3でプログレスバーの表示メモ。

ちょっと急ぎで作成。。

html側。
jqueryとか使ってます。
■html.phpファイル

<head>
        <meta charset="utf-8" />
        <title>PHP Progress Sample</title>
        <link href="dist/css/bootstrap.css" rel="stylesheet">
</head>
<body>

        <div class="row">
                <div class="col-md-6 col-md-offset-3">
                        <h1>Progress Sample</h1>
                        <h2>ロード中</h2>
                        <div class="progress">
                                <div id="progress_elem" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">0%</div>
                        </div>
                </div>
        </div>

        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
                function updateBar(progress) {
                        var status = progress+"%";
                        $("#progress_elem").css({width: status}).text(status);

                }
        </script>
</body>

php側

■index.phpファイル

<?php

// htmlの出力
require('html.php');

echo str_pad(" ",4096)."<br />\n";

ob_end_flush();
ob_start('mb_output_handler');

$count=0;
$max_count = 15;

for($i=0; $i <= $max_count; $i++){
    $nCount = floor($count / $max_count * 100);
    echo '<script type="text/javascript">updateBar("' . $nCount . '")</script>';
    ob_flush();
    flush();

    $count++;
    sleep(1);
}

実際のサンプルはこちら

出力後に最下部にscriptタグを吐き出して無理矢理動かしている感じが
否めない。。

html開く⇒ajaxでバックエンドの処理をコール⇒進捗を定期的にjsが取りに行くっていう実装のほうが良いかも。

う～む。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル