Yii Framework CJuiProgressBar 進度條元件：靜態顯示與 JavaScript 動態更新

CJuiProgressBar 封裝 jQuery UI Progressbar，提供視覺化進度指示，支援確定/不確定模式、動畫與動態數值更新。

基本靜態進度條

<?php $this->widget('zii.widgets.jui.CJuiProgressBar', array(
    'id' => 'progress',
    'value' => 30,  // 0-100
    'htmlOptions' => array(
        'style' => 'width:300px; height:20px;',
    ),
)); ?>

JavaScript 動態更新進度（模擬長時間任務）

<?php
Yii::app()->clientScript->registerScript('progress-sim', "
    var progress = 0;
    var timer = setInterval(function() {
        progress += Math.random() * 10;
        if (progress >= 100) {
            progress = 100;
            clearInterval(timer);
            $('#status').text('完成!');
        }
        $('#progress').progressbar('value', progress);
        $('#percent').text(Math.floor(progress) + '%');
    }, 500);
", CClientScript::POS_READY);
?>

<div id="progress" style="width:300px;"></div>
<span id="percent">0%</span>
<span id="status" style="margin-left:10px;">進行中...</span>

整合 AJAX 真實進度回報

<?php
Yii::app()->clientScript->registerScript('progress-ajax', "
    function pollProgress(taskId) {
        $.getJSON('".Yii::app()->createUrl('task/progress')."', { id: taskId }, function(data) {
            $('#progress').progressbar('value', data.percent);
            $('#status').text(data.status);
            if (data.percent < 100) {
                setTimeout(function() { pollProgress(taskId); }, 2000);
            } else {
                $('#status').text('任務完成');
            }
        });
    }
    // 假設任務啟動後取得 taskId
    pollProgress(123);
", CClientScript::POS_READY);
?>

後端 actionProgress 回傳 JSON：{percent: 45, status: '處理第 3 步驟...'}

不確定模式（Indeterminate）

<?php $this->widget('zii.widgets.jui.CJuiProgressBar', array(
    'id' => 'indeterminate',
    'value' => false,  // 不確定模式
    'htmlOptions' => array('style' => 'width:100%;'),
)); ?>

適用於無法預估進度的操作（如連線中、初始化中）。

樣式客製化

/* CSS */
#progress .ui-progressbar-value {
    background: linear-gradient(to right, #4caf50, #8bc34a) !important;
    border-radius: 4px;
}
#progress {
    border-radius: 4px;
    background: #e0e0e0;
    border: 1px solid #bdbdbd;
}

適用場景

• 檔案上傳進度（搭配 HTML5 File API 或 nginx upload module）
• 批次資料匯入/匯出、報表產生
• 多步驟精靈式表單進度指示
• 系統維護、備份還原等長時間操作

注意事項

• jQuery UI Progressbar 不支援垂直方向（需 CSS transform 或改用其他庫）
• 頻繁 AJAX 輪詢會增加伺服器負載，建議間隔 ≥ 2 秒或使用 WebSocket/Server-Sent Events
• 進度條僅為視覺回饋，關鍵業務邏輯不可依賴前端進度判斷