[代码实例][HTML][Bootstrap]动态进度条

最新推荐文章于 2024-07-19 15:32:49 发布

cloudblaze

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量724

点赞数

分类专栏：代码实例

本文链接：https://blog.csdn.net/cloudblaze/article/details/109017112

版权

代码实例专栏收录该内容

33 篇文章 0 订阅

订阅专栏

动态进度条

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Bootstrap Demo 102</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

	<script type="text/javascript" src="Js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript" src="Js/popper.min.js"></script>

	<%-- Bootstrap --%>
	<link rel="stylesheet" href="Lib/bootstrap-4.5.2/css/bootstrap.min.css" />
	<script type="text/javascript" src="Lib/bootstrap-4.5.2/js/bootstrap.min.js"></script>

	<style type="text/css">
		.load-bar {
			border-radius: 12px;
			position: relative;
		}

		.progress-bar-striped {
			width: 0%;
			border-radius: inherit;
			position: relative;
			animation: loader 10s linear infinite;
		}

		@keyframes loader {
			from {
				width: 0%;
			}

			to {
				width: 100%;
			}
		}
	</style>

	<script type="text/javascript">
		$(function () {
			var interval = setInterval(increment, 100);
			var current = 0;

			function increment() {
				current++;
				$('#counter').html(current + '%');
				if (current == 100) {
					current = 0;
				}
			}
		});
	</script>
</head>
<body class="container">
	<div class="progress load-bar my-5" style="height: 25px;">
		<div class="progress-bar progress-bar-striped text-center">
			<span id="counter"></span>
		</div>
	</div>
</body>
</html>