永远加载不满的进度条——前端开发的艺术

2023-03-14 20:17:49

永远加载不满的进度条：前端开发的艺术

巧妙运用 CSS 动画

你想过永远加载不满的进度条是如何实现的吗？这可不是什么黑魔法，而是 CSS 动画的巧妙运用。我们通过动画创建出一种加载的假象，让用户误以为进度条正在一步步前进。来看看代码：

/* 进度条容器样式 */
.progress-bar-container {
  width: 100%;
  height: 20px;
  background-color: #ccc;
}

/* 进度条样式 */
.progress-bar {
  width: 0%;
  height: 100%;
  background-color: #007bff;
  transition: width 1s linear;
}

/* 进度条动画样式 */
@keyframes loading {
  from {
    width: 0%;
  }

  to {
    width: 99%;
  }
}

/* 将动画应用到进度条 */
.progress-bar {
  animation: loading infinite 1s linear;
}

进度条容器就是一个灰色条，而进度条是蓝色条。我们用 @keyframes 规则定义了 loading 动画，让进度条的宽度从 0% 逐渐增加到 99%。由于动画是无限循环的，因此进度条看起来永远都在加载。

巧用 JavaScript 控制动画

为了让进度条更逼真，我们可以用 JavaScript 来控制动画。比如，我们可以随机改变动画时间，或者在一定程度时暂停动画。看看这个代码：

// 获取进度条元素
const progressBar = document.querySelector('.progress-bar');

// 定义一个随机函数，用于随机生成动画执行时间
const randomTime = () => {
  return Math.random() * 1000 + 500;
};

// 定义一个暂停动画的函数
const pauseAnimation = () => {
  progressBar.style.animationPlayState = 'paused';
};

// 随机改变动画执行时间
setInterval(() => {
  progressBar.style.animationDuration = `${randomTime()}ms`;
}, 1000);

// 暂停动画
setTimeout(() => {
  pauseAnimation();
}, 5000);