CSS Windows 8预加载器（加载图标）使用HTML5和JavaScript而不是图片

在本文中，我们将介绍如何使用HTML5和JavaScript创建一个CSS Windows 8预加载器（加载图标），而无需使用图片。预加载器通常用于在等待页面内容加载时向用户显示进度。

阅读更多：CSS 教程

1. HTML 结构和基本样式

首先，让我们创建一个HTML文件，并为预加载器添加必要的结构和基本样式。我们将使用CSS flexbox布局来轻松地定位和排列预加载器的组件。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .preloader-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  </style>
  <title>CSS Windows 8 Preloader</title>
</head>

<body>
  <div class="preloader-container">
    <!-- Preloader components will be added here -->
  </div>
</body>

</html>

上述代码中，我们设置了html和body元素的高度为100%，并且将预加载器容器（.preloader-container）设置为flex布局，使其在页面居中显示。

2. CSS 预加载器

接下来，我们将使用CSS来创建一个具有Windows 8风格的预加载器。我们将使用一个主要的旋转动画和一些辅助元素来实现这个效果。

<style>
  /* Add this CSS code within the <style> tags in the head section */

  .preloader-element {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    animation: preloader-animation 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
  }

  .preloader-container {
    position: relative;
  }

  .preloader-element:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    animation-delay: 0.1s;
  }

  .preloader-element:nth-child(3) {
    position: absolute;
    top: 0;
    right: 0;
    animation-delay: 0.2s;
  }

  @keyframes preloader-animation {
    0%,
    100% {
      transform: scale(1);
      opacity: 1;
    }

    50% {
      transform: scale(1.5);
      opacity: 0;
    }
  }
</style>

在上述代码中，我们创建了一个名为.preloader-element的CSS类，来定义预加载器的基本元素样式。每个预加载器元素都是一个带白色背景的圆形，具有12像素的宽度和高度。我们还定义了一个名为preloader-animation的动画，它将使元素在旋转的同时逐渐变透明。

3. JavaScript 动态创建预加载器组件

在完成CSS样式之后，我们将使用JavaScript动态地创建预加载器组件。我们将在.preloader-container中添加三个预加载器元素，并在一段时间后删除它们。

<script>
  // Add this JavaScript code before the closing </body> tag

  window.addEventListener('DOMContentLoaded', function () {
    var preloaderContainer = document.querySelector('.preloader-container');

    createPreloaderElements();

    setTimeout(function () {
      var preloaderElements = document.querySelectorAll('.preloader-element');
      preloaderElements.forEach(function (element) {
        element.remove();
      })
    }, 4000);

    function createPreloaderElements() {
      for (var i = 1; i <= 3; i++) {
        var preloaderElement = document.createElement('div');
        preloaderElement.classList.add('preloader-element');
        preloaderContainer.appendChild(preloaderElement);
      }
    }
  });
</script>

在上述JavaScript代码中，我们使用window.addEventListener('DOMContentLoaded', callback)来确保在页面加载完成后执行我们的代码。createPreloaderElements函数用于动态创建预加载器元素，并将其添加到.preloader-container中。setTimeout函数用于在一定时间后删除预加载器元素，这里设置了4秒。