Bootstrap创建带遮罩层的动态进度条

最新推荐文章于 2024-04-10 14:09:14 发布

ostuthere

最新推荐文章于 2024-04-10 14:09:14 发布

阅读量511

点赞数 2

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_35727582/article/details/116590499

版权

bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近需要实现带遮罩层的动态进度条，用的是bootstrap框架，在网上看了一些文章，我觉得还是得自己记录一下

bootstrap遮罩层

bootstrap的遮罩层即为模态框，使用modal创建一个遮罩层。

<div class="modal fade" id="loadingBar">
	<!-- 创建遮罩层，fade表示隐藏 -->
</div>

bootstrap进度条

bootstrap的进度条使用progress实现，代码如下。

<div class="progress">
  <div id="myDiv" class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
  0%
  </div>
</div>

实现动态进度条

bootstrap的进度条使用progress实现，代码如下。

function setProgressBar(time) {
	var i = 0;
	$(".progress-bar").width(i+"%");
	$(".progress-bar").text(i+"%");
	// 防止点击页面任意处时隐藏遮罩层
	$("#loadingBar").modal({backdrop:'static'});
	// 显示遮罩层
	$("#loadingBar").modal('show');
	var progress = setInterval(function() {
		if (i >= 100) {
			clearInterval(progress);
			// 隐藏遮罩层
			$("#loadingBar").modal('hide');
		}
		$(".progress-bar").width(i+"%");
		$(".progress-bar").text(i+"%");
		i++;
	}, time);
}

页面代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading</title>
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
  <style>
    .progress {
      position: absolute;
      width: 500px;
      height: 30px;
      z-index: 12;
      text-align: center;
      line-height: 30px;
      left: 50%;
      top: 50%;
      margin-left: -250px;
      margin-top: -15px;
      border-radius: 20px;
    }
    .progress-bar {
      line-height: 30px;
      background-color: #337AB7;
    }
  </style>
</head>
<body>
  <div class="modal fade" id="loadingBar">
    <!-- 创建遮罩层 -->
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
      0%
      </div>
    </div>
  </div>
  <button id="startProgress">进度条</button>
</body>
<script src="./js/jquery.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script>
  function setLoadingBar (time) {
    var i = 0;
    $("#loadingbar").modal({backdrop:'static'});
    $("#loadingbar").modal('show');
    var progress = setInterval(function() {
      if(i >= 100){
        clearInterval(progress);
        $("#loadingbar").modal('hide');
      }
      $(".progress-bar").width(i+"%");
      $(".progress-bar").text(i+"%");
      i++;
    }, time);
  }
  $("#startProgress").on('click', function() {
    setLoadingBar(500);
  });
</script>
</html>