Javascript JQuery进度条实现

我发现了这个Jquery进度条函数，我只想在加载网页时使用它来显示进度条。因为我的页面加载有点慢，所以它提醒用户页面没有停止加载。下面是javascript和css部分。现在如何在html部分实现它？我应该在html正文中包含什么

<script type="text/javascript" src="js/jquery.progressbar.js"></script>
    <script type="text/javascript">
        var progress_key = '<?= $uuid ?>';

        $(document).ready(function() {
            $("#pb1").progressBar();
            $("#pb2").progressBar({ barImage:  
           'images/progressbg_yellow.gif'} );
            $("#pb3").progressBar({ barImage: 
           'images/progressbg_orange.gif', showText: false} );
            $("#pb4").progressBar(65, { showText: false, barImage: 
           'images/progressbg_red.gif'} );
            $(".pb5").progressBar({ max: '2000', textFormat: 
             'fraction', callback: function(data) { if (data.running_value == 
               data.value) { 
            alert("Callback example: Target reached!"); } }} );
            $("#uploadprogressbar").progressBar();
        });

</script>
<style type="text/css">
        table tr { vertical-align: top; }
        table td { padding: 3px; }
        div.contentblock { padding-bottom: 25px; }  
        #uploadprogressbar { display: none; }
</style>

var progress_key=''；
$（文档）.ready（函数（）{
$（“#pb1”）.progressBar（）；
$（“#pb2”）.progressBar（{barImage:
'images/progressbg_yellow.gif'}）；
$（“#pb3”）.progressBar（{barImage:
'images/progressbg_orange.gif'，showText:false}）；
$（“#pb4”）.progressBar（65，{showText:false，barImage:
'images/progressbg_red.gif'}）；
$（“.pb5”）.progressBar（{max:'2000'，文本格式：
“分数”，回调：函数（数据）{if（data.running_值==
数据值）{
警报（“回调示例：已达到目标！”；}）；
$（“#uploadprogressbar”）.progressBar（）；
});
表tr{垂直对齐：顶部；}
表td{padding:3px；}
div.contentblock{填充底部：25px；}
#uploadprogressbar{display:none；}

---

谢谢

基于您需要的演示

<span class="progressBar" id="pb1"></span>

id为pb1。。pb4

---

谢谢。但它与我的网页中的所有其他元素一起加载。我想在其他东西加载之前，先加载它。你不只是插上电源，它还能神奇地工作。这个插件需要被告知如何更新其当前进度。您询问的内容取决于您加载页面的方式（内容）。