JavaScript 加载动画的作用是在页面加载过程中给用户一个视觉体验，告诉用户网页正在加载并且很快就要加载完成了。JavaScript 加载动画通常会显示在页面的中间位置，或者局部加载的时候会显示在该区域的中间位置，如下：

.loader {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 99;display: flex;justify-content: center;align-items: center;}.loader img {width: 150px;height: 150px;}

为了展示如何加载动画的外观，下面将给出两种不同的加载动画，一种是应用著名的loading.io网站的资源；另一种则是使用 CSS 和 JS 实现的简单加载动画。

加载动画1

加载动画2

以上两个加载动画的区别在于外观样式不同。第一个加载动画使用的是引用自loading.io网站的资源，它以相同大小的正方形方块组成一个大方块，并将其旋转，形成旋转的正方形方块。第二个加载动画使用的是 CSS 和 JS 编写的样式，它以不同大小的同心圆组成一个大圆，并将其旋转，形成旋转的圆圈。

无论外观样式如何，JavaScript 加载动画在实现时都需要注意以下几点：

• 样式需要设计为固定定位，这样才能保证它在整个页面的中央位置
• 样式需要设置 z-index 属性，这样才能保证它不会被其他元素覆盖
• 样式大小需要设置为与实际占用空间一致，以免影响页面排版
• 需要在页面加载完成后使用 JavaScript 将其隐藏

需要注意的是，如果页面的加载速度很快，那么加载动画就会瞬间消失，这种情况下会让用户感到加载动画显得多余。因此，加载动画的设计需要在考虑加载动画的可见性的同时，考虑在快速加载页面时的隐藏方式。

除了以上实现方式，还有一种通过使用第三方库实现的加载动画。例如，使用GreenSock Animation Platform(GSAP) 这个帮助开发者轻松创建高效、直观和流畅动画的开源 JavaScript 动画库。GSAP 可以实现各种逼真、平滑的加载动画效果，它包括许多 TypeScript 代码片段，免费向开发人员提供基础版、促销版和较高级的订阅版。

JavaScript 加载动画的表现形式多样，但其设计目的是为了优化页面加载体验，提高用户体验。通过使用不同的样式和库，开发人员可以根据项目需要选择不同的设计方式。但无论采取何种设计方式，不能影响页面的排版、占用过多资源，也不能太过显眼，这样才是一种优美的设计。