JQuery制作加载进度条

 

页面展示：

 

 

 

点击加载进度条：

 

 

点击结束进度条：

 

 

代码：

<html>
    <meta charset="utf-8">
    <title>jQuery制作进度条</title>
    <link rel="stylesheet" href="label/bootstrap.css" type="text/css"/>
    <script src="label/jquery.min.js" type="text/javascript"></script>
    <script src="label/bootstrap.min.js" type="text/javascript"></script>
    
    <style>
        #loading6 {
            height: 34px;
            width: 100%;
            background-image: url(label/loading.gif);
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>


    <script type="text/javascript">
        $(function() {
            $('#add_disk_model').modal('show')
            $('#loading6').hide()
            
            $('#exec_label').click(function () {
                $('#loading6').show()
            });
            $('#stop_label').click(function () {
                $('#loading6').hide()
            });
        });
    </script>


    <form>
        <div id="add_disk_model" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">测试加载条</h4>
                    </div>
                    <div class="panel-body">
                        <form class="bs-example form-horizontal activate-form">
                            <div id="loading6" class="portlet-body"></div>
                            
                            <div class="form-actions ">
                                <div class="modal-footer">
                                    <div class="col-md-4">
                                        <button id="exec_label" type="button" class="btn green">加载进度条</button>
                                    </div>
                                    <div class="col-md-4">
                                        <button id="stop_label" type="button" class="btn green">结束进度条</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </form>
</html>

 

插件参考：

链接：https://pan.baidu.com/s/1k86UfxWTHa3HSJnct42uKQ
提取码：p32l

 

posted @ 2021-02-08 17:38  TianShu  Views(184)  Comments(0)  Edit  收藏  举报