纯html+css实现Element loading效果

当前位置：电视猫 > HTML/Xhtml>

电视猫时间： 2024-07-14 07:55:34

Sure, here is an example of how to create an Element UI-like loading effect using pure HTML and CSS:

HTML:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element UI Loading Effect</title>
  <style>
    /* Basic styles */
    body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #f0f0f0;
    }

    /* Loading container */
    .loading-container {
      position: relative;
      width: 80px;
      height: 80px;
      margin: 0 auto;
    }

    /* Spinner bars */
    .spinner-bar {
      position: absolute;
      width: 10px;
      height: 40px;
      background-color: #333;
      animation: spin 1.2s linear infinite;
    }

    .spinner-bar:nth-child(1) {
      top: 0;
      left: 0;
      transform-origin: bottom left;
      animation-delay: 0.2s;
    }

    .spinner-bar:nth-child(2) {
      top: 0;
      right: 0;
      transform-origin: bottom right;
      animation-delay: 0.4s;
    }

    .spinner-bar:nth-child(3) {
      bottom: 0;
      right: 0;
      transform-origin: top right;
      animation-delay: 0.6s;
    }

    .spinner-bar:nth-child(4) {
      bottom: 0;
      left: 0;
      transform-origin: top left;
      animation-delay: 0.8s;
    }

    /* Animation */
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="loading-container">
    <div class="spinner-bar"></div>
    <div class="spinner-bar"></div>
    <div class="spinner-bar"></div>
    <div class="spinner-bar"></div>
  </div>
</body>
</html>

Explanation:

HTML Structure:
- The HTML creates a div container with the class loading-container to hold the loading animation.
- Inside the container, four div elements with the class spinner-bar are created to represent the rotating bars.
CSS Styles:
- Basic styles are set for the body to center the loading animation.
- The .loading-container is positioned relative to allow absolute positioning of the spinner bars.
- Each .spinner-bar is styled with width, height, background color, and an individual animation delay using animation-delay.
- The spin animation is defined to rotate the bars around their respective origins.

Key CSS Properties:

position: relative/absolute: Used to position the container and spinner bars.
width, height, background-color: Style the appearance of the spinner bars.
animation: spin 1.2s linear infinite, animation-delay: Define the rotating animation and staggered timings.
transform-origin: Set the rotation point for each spinner bar.

Customizations:

You can customize the colors, sizes, and animation speed of the spinner bars using CSS.
The number of spinner bars can be adjusted to create different effects.
You can add additional CSS animations to create more complex loading effects.