进度条动画

最新推荐文章于 2024-11-20 14:43:44 发布

原创最新推荐文章于 2024-11-20 14:43:44 发布 · 222 阅读

1 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

29 篇文章

订阅专栏

css

18 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>loading</title>
		<style>
			body {
				background: #000;
			}

			canvas {
				background: #181818;
				box-shadow: 0 0 0 1px #282828;
				bottom: 0;
				left: 0;
				margin: auto;
				position: absolute;
				right: 0;
				top: 0;
			}
		</style>
	</head>
	<body>

		<script>
			var canvas = document.createElement('canvas'),
				ctx = canvas.getContext('2d'),
				width = 400,
				height = 100,
				loaded = 0,
				loaderSpeed = 0.6,
				loaderWidth = 310,
				loaderHeight = 16,
				loaderX = width / 2 - loaderWidth / 2,
				loaderY = height / 2 - loaderHeight / 2,
				particles = [],
				particleLift = 180,
				particleRate = 4,
				hueStart = 0,
				hueEnd = 120,
				hue = 0,
				gravity = 0.12,
				dpr = window.devicePixelRatio;

			document.body.appendChild(canvas);
			canvas.width = width;
			canvas.height = height;
			canvas.style.width = (width / dpr) + 'px';
			canvas.style.height = (height / dpr) + 'px';
			ctx.globalCompositeOperation = 'lighter';

			function rand(rMi, rMa) {
				return ~~((Math.random() * (rMa - rMi + 1)) + rMi);
			}

			function updateLoader() {
				if (loaded < 100) {
					loaded += loaderSpeed;
				} else {
					loaded = 0;
				}
			}

			function renderLoader() {
				ctx.fillStyle = '#000';
				ctx.fillRect(loaderX, loaderY, loaderWidth, loaderHeight);

				hue = hueStart + (loaded / 100) * (hueEnd - hueStart);

				var newWidth = (loaded / 100) * loaderWidth;
				ctx.fillStyle = 'hsla(' + hue + ', 100%, 40%, 1)';
				ctx.fillRect(loaderX, loaderY, newWidth, loaderHeight);

				ctx.fillStyle = '#444';
				ctx.fillRect(loaderX, loaderY, newWidth, loaderHeight / 2);
			}

			function Particle() {
				this.x = loaderX + ((loaded / 100) * loaderWidth) - rand(0, 1);
				this.y = height / 2 + rand(0, loaderHeight) - loaderHeight / 2;
				this.vx = (rand(0, 4) - 2) / 100;
				this.vy = (rand(0, particleLift) - particleLift * 2) / 100;
				this.width = rand(1, 4) / 2;
				this.height = rand(1, 4) / 2;
				this.hue = hue;
			}

			Particle.prototype.update = function(i) {
				this.vx += (rand(0, 6) - 3) / 100;
				this.vy += gravity;
				this.x += this.vx;
				this.y += this.vy;

				if (this.y > height) {
					particles.splice(i, 1);
				}
			};

			Particle.prototype.render = function() {
				ctx.fillStyle = 'hsla(' + this.hue + ', 100%, ' + rand(50, 70) + '%, ' + rand(20, 100) / 100 + ')';
				ctx.fillRect(this.x, this.y, this.width, this.height);
			};

			function createParticles() {
				var i = particleRate;
				while (i--) {
					this.particles.push(new Particle());
				}
			}

			function updateParticles() {
				var i = particles.length;
				while (i--) {
					var p = particles[i];
					p.update(i);
				};
			}

			function renderParticles() {
				var i = particles.length;
				while (i--) {
					var p = particles[i];
					p.render();
				}
			}

			function clearCanvas() {
				ctx.clearRect(0, 0, width, height);
			}


			function loop() {
				requestAnimationFrame(loop);
				clearCanvas();
				createParticles();
				updateLoader();
				updateParticles();
				renderLoader();
				renderParticles();
			}

			loop();
		</script>
	</body>
</html>