JS 实现加载效果

最新推荐文章于 2024-03-18 15:56:56 发布

置顶 SoulCabin

最新推荐文章于 2024-03-18 15:56:56 发布

阅读量742

点赞数 2

分类专栏： js 文章标签： JS css html

本文链接：https://blog.csdn.net/soulcabin/article/details/107514892

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>加载效果</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			#progressbar {
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background: white;
				z-index: 99999;
			}

			#progressbar .border {
				border: 1px solid #777;
				width: 275px;
				height: 14px;
				padding: 1px;
				position: absolute;
				left: 50%;
				top: 50%;
				border-radius: 7px;
				transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-webkit-transform: translate(-50%, -50%);
			}

			#progressbar .bar {
				background-color: #73c944;
				width: 50%;
				height: 14px;
				border-radius: 6px;
				overflow: hidden;
			}

			#progressbar .desc {
				text-align: center;
				font-size: 12px;
				line-height: 24px;
			}
		</style>
	</head>

	<body>
		<div id="progressbar">
			<div class="border">
				<div class="bar">&nbsp;</div>
				<div class="desc">正在加载...</div>
			</div>
		</div>
		<script type="text/javascript">
			var loading = function() {
				var ct = document.getElementById("progressbar"),
					desc = ct.getElementsByTagName("div"),
					idx = 0,
					time = 500,
					bar = desc[1],
					desc = desc[2],
					timer;
				bar.setValue = function(n) {
					this.style.width = n + "%";
				};
				void
				function() {
					bar.setValue(idx += (100 - idx) * .2);
					timer = setTimeout(arguments.callee, time += 100);
				}();
				return {
					remove: function() {
						clearTimeout(timer);
						desc.innerHTML = "加载完成";
						bar.setValue(100);
						setTimeout(function() {
							ct.parentNode.removeChild(ct);
						}, 500);
					}
				};
			}();
			setTimeout(loading.remove, 10000); //加载完成
		</script>
	</body>
</html>

SoulCabin

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS 实现加载效果

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>加载效果</title> <style type="text/css"> * { padding: 0; margin: 0; } #progressbar { position: fixed; left: 0; right: 0;.
复制链接

扫一扫