**有準確值的進度條** * 有準確值的進度條會顯示當前進度正處于整體進度的占比位置，用戶可以更直觀的預期完成時間； * 使用進度條控件，需要一個進度條控件容器，mui會自動識別該容器下是否有進度條控件，若沒有，則自動創建。 **進度條控件DOM結構：** ~~~ <div id="demo1" class="mui-progressbar"> <span></span> </div> ~~~ **初始化:** ~~~ mui(container).progressbar({progress:20}).show(); ~~~ 例如: ~~~ mui("#demo1").progressbar({progress:20}).show(); ~~~ **progressbar初始化邏輯：** 檢查當前容器(container控件)自身是否包含.mui-progressbar類： * 當前容器包含.mui-progressbar類，則以當前容器為目標控件，直接顯示進度； * 否則，檢查當前容器的直接孩子節點是否包含.mui-progressbar類，若存在，則以遍歷到的第一個含有.mui-progressbar類的孩子節點為目標控件，顯示進度； * 若當前容器的直接孩子節點，均不含.mui-progressbar類,則自動創建進度條控件； **更改顯示進度條:** ~~~ mui(container).progressbar().setProgress(50); ~~~ **關閉進度條:** ~~~ mui(container).progressbar().hide(); ~~~ 備注：關閉進度條一般用于動態創建（DOM中預先未定義）的進度條，調用hide方法后，會直接刪掉對應的DOM節點；若已提前創建好DOM節點的進度條，調用hide方法無效； **無限循環進度條:** 若無法準確提供當前進度，可以提供無限循環進度條（無限循環進度條類似于waiting等待框,參考[HTML5+規范] 無限循環進度條和準確值的進度條的用法基本相同，有如下差異： 進度條控件DOM結構（多了.mui-progressbar-infinite）： ~~~ <div id="demo1" class="mui-progressbar mui-progressbar-infinite"> <span></span> </div> ~~~ **初始化** ~~~ mui("#demo1").progressbar().show(); ~~~ 注意：無限循環進度條不顯示具體進度，因此初始化時，不能傳入progress參數；mui框架也是根據progressbar構造方法中是否包含progress參數來區分當前進度條為有準確值的進度條還是無限循環進度條； 同樣因為不顯示具體進度的原因，無限循環進度條調用setProgress()方法無效。 **關閉進度條** ~~~ mui("#demo1").progressbar().hide(); ~~~ 頁面頂部進度條 頁面頂部進度條類似瀏覽器進度條，固定顯示在頁面頂部（標題導航控件下方）； 因此，若當前頁面使用父子雙webview模式，子頁面沒有標題導航組件，則需通過自定義css的方式，重定義頂部進度條的位置，示例代碼如下： ~~~ body>.mui-progressbar{ top:0 } ~~~ 使用頁面頂部進度條時，無需編寫DOM結構，使用如下代碼即可自動創建（頂部無限循環進度條同理）： ~~~ mui('body').progressbar({ progress: 20 }).show(); ~~~