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 @   困了就睡觉觉  Views(186)  Comments(0Edit  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示