<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="path/to/progress-bar.css">
<script src="path/to/progress-bar.js"></script>
<div id="progressBar"></div>
$(document).ready(function() {
$('#progressBar').progressBar();
});
$(document).ready(function() {
$('#progressBar').progressBar({
width: '300px', // 進度條的寬度
height: '10px', // 進度條的高度
backgroundColor: '#f0f0f0', // 進度條的背景顏色
barColor: '#00ff00', // 進度條的顏色
duration: 2000, // 進度條加載的持續時間(毫秒)
percentage: true, // 是否顯示百分比文本
animate: true // 是否啟用動畫效果
});
});
// 開始加載進度條
$('#progressBar').start();
// 停止加載進度條
$('#progressBar').stop();
// 重置進度條
$('#progressBar').reset();
以上就是使用Progress Bar插件的基本方法和一些常見的選項和方法。根據實際需求,可以對進度條進行進一步的自定義和擴展。