css loding

CSS Loading是指在页面首次加载时使用CSS来修饰页面元素，并确保UI元素以最少的延迟时间呈现给用户。因此，在应用程序加载期间，加载动画和进度指示器是必不可少的。

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

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

上面这段代码就是一个简单的CSS Loading动画，使用border和border-top来创建条纹状物体，同时使用animation来使动画旋转。

然而，使用CSS Loading动画的一个关键因素是确保它不会加重页面的负载时间。因此，可以使用如下所示的技巧来优化：

• 使用尽可能小的CSS样式，例如使用缩写属性。
• 避免使用JavaScript库，而使用原生JavaScript编写。
• 使用SVG代替图片。
• 最小化HTTP请求数量，例如将CSS和JavaScript文件合并。
• 使用CSS sprite将多个图像组合为一个图像。
• 避免文件大小超过150KB。

综上所述，CSS Loading是开发人员确保快速响应和流畅用户体验的重要元素之一。通过使用上述技巧，可以确保这种动画不会降低页面性能。