javascript制作loading动画效果 loading效果

下面是“JavaScript制作loading动画效果”的攻略：

JavaScript制作loading动画效果

1、为什么需要loading动画

网页中，加载耗时较久的资源，例如页面大图、视频等，会让用户感到等待时间较长，用户的耐心和积极性都可能因此受到影响，因此我们一般会在这些资源加载的过程中显示一个loading动画，以提醒用户内容正在加载中，并在用户等待的过程中提供一些良好的体验。

2、使用CSS制作loading动画

使用CSS3的animation属性跟关键帧，我们可以很快制作一个简单的loading动画。

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

3、使用JavaScript制作loading动画

制作loading动画除了使用CSS3外，也可以使用JavaScript，下面是一个简单的示例。首先我们需要在HTML中创建一个容器用于显示loading动画。然后定义一个计数器变量counter，用于记录当前旋转的度数。最后使用setInterval函数定时改变loading动画的角度值。

<div id="loader"></div>

const loader = document.querySelector('#loader');
let counter = 0;

const rotate = () => {
  counter += 15;
  if (counter > 360) {
    counter = 0;
  }
  loader.style.transform = `rotate(${counter}deg)`;
}

setInterval(rotate, 50);

4、结语

通过本文对CSS3和JavaScript制作loading动画的简要示例，我们可以看到两者实现loading动画的方式各不相同。CSS3使用关键帧来实现loading动画非常简单，而JavaScript实现loading动画可以实现更多的个性化效果。在实际开发中，具体使用哪种方式可以根据实际需求来选择。