编写一个loading页面

远之喵
869 阅读5分钟

在现代 Web 应用中，为了提供更好的用户体验，一个吸引人的 Loading 页面是必不可少的。当应用正在加载数据或执行某些耗时操作时，Loading 页面可以让用户知道系统正在工作，而不是让他们面对一个空白的屏幕或不确定的等待。在本文中，我们将介绍如何使用 HTML 和 CSS 来创建一个炫酷的 Loading 页面，其中包含一个动态的转圈圈动画和简洁的文字提示。

一、效果展示

首先，让我们来看一下最终的 Loading 页面效果。页面背景为天蓝色（skyblue），中间有一个白色的旋转动画，由四个小球组成，不断循环缩放，同时下方有 “加载中・・・” 的文字提示，字体为微软雅黑，颜色为白色。

loading

二、HTML 结构

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>loading</title>
</head>

<body>
    <div class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
    <div class="text">
        加载中 · · ·
    </div>
</body>
</html>

这个 HTML 结构非常简单，由一个包含三个容器的spinner元素和一个显示文字的text元素组成。每个容器中都有四个小球，通过 CSS 动画实现旋转效果。

三、CSS 样式

    <style>
        body{
            background-color: skyblue;
        }
        .text{
            position: absolute;
            left: 50%;
            top: 60%;
            transform: translate(-50%, -50%);
            font: normal bold 25px/30px 'Microsoft YaHei', sans-serif;
            color: #fff;
        }
        .spinner {
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            position: absolute;
        }
        .container1>div,
        .container2>div,
        .container3>div {
            width: 26px;
            height: 26px;
            background-color: #fff;
            border-radius: 100%;
            position: absolute;
            -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
            animation: bouncedelay 1.2s infinite ease-in-out;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .spinner .spinner-container {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .container2 {
            -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
        }

        .container3 {
            -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
        }

        .circle1 {
            top: 0;
            left: 0;
        }

        .circle2 {
            top: 0;
            right: 0;
        }

        .circle3 {
            right: 0;
            bottom: 0;
        }

        .circle4 {
            left: 0;
            bottom: 0;
        }

        .container2 .circle1 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        .container3 .circle1 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        .container1 .circle2 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .container2 .circle2 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        .container3 .circle2 {
            -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s;
        }

        .container1 .circle3 {
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }

        .container2 .circle3 {
            -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
        }

        .container3 .circle3 {
            -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
        }

        .container1 .circle4 {
            -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
        }

        .container2 .circle4 {
            -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
        }

        .container3 .circle4 {
            -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
        }

        @-webkit-keyframes bouncedelay {
            0%,
            80%,
            100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bouncedelay {
            0%,
            80%,
            100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }

            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }
    </style>

  1. 页面背景和文字样式：

    • 设置页面背景颜色为天蓝色（skyblue）。
    • 文字提示 “加载中・・・” 通过绝对定位和transform属性居中显示在页面底部，字体为微软雅黑，大小为 25 像素，行高为 30 像素，颜色为白色，字体粗细为粗体。

  2. 旋转动画容器样式：

    • .spinner元素用于包含整个旋转动画，通过绝对定位和transform属性居中显示在页面中间，宽度和高度为 120 像素。
    • 三个.spinner-container容器分别旋转 0 度、45 度和 90 度，以实现不同角度的小球排列。
    • 每个小球都是一个白色的圆形，宽度和高度为 26 像素，边框半径为 100%，通过绝对定位放置在容器中的不同位置。

  3. 动画效果：

    • 使用@keyframes bouncedelay定义了一个动画，在 0%、80% 和 100% 时，小球缩放为 0，在 40% 时，小球缩放为 1。这个动画通过animation属性应用到每个小球上，持续时间为 1.2 秒，无限循环，动画效果为 ease-in-out，并且在动画结束后保持最后一帧的状态。
    • 通过设置不同的animation-delay属性，让每个小球的动画延迟不同，从而实现依次出现的效果。

css实现loading icon

image.png

<!-- 就一个标签 -->
<div class="loader"></div>

<style>
/* 1. 容器本身负责旋转 */
.loader{
  width: 32px;
  height: 32px;
  position: relative;          /* 给伪元素定位 */
  animation: rotate 1s linear infinite;
}

/* 2. 用 ::before 画整片渐变圆 */
.loader::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
        from 90deg,
        rgba(77,160,255,0) 0deg,
        rgba(77,160,255,0) 180deg,
        rgba(77,160,255,1) 360deg
  );
}

/* 3. 用 ::after 把中间掏掉，留下环 */
.loader::after{
  content: '';
  position: absolute;
  inset: 3px;                  /* 3px = 环宽，可调 */
  border-radius: 50%;
  background: #fff;            /* 与页面背景同色即可 */
}

@keyframes rotate{
  to{ transform: rotate(360deg); }
}
</style>

四、应用场景

这个 Loading 页面可以在以下场景中使用：

  1. 当页面加载大量数据或执行复杂的计算时，显示 Loading 页面可以让用户知道系统正在工作，避免用户以为页面出现故障或卡顿。
  2. 在提交表单或进行 AJAX 请求时，可以显示 Loading 页面，让用户知道请求正在处理中。
  3. 对于一些需要较长时间才能完成的操作，如文件上传、下载等，可以使用 Loading 页面来提供反馈，让用户知道操作的进度。

五、总结

通过使用 HTML 和 CSS，我们可以轻松地创建一个炫酷的 Loading 页面，为用户提供更好的体验。这个 Loading 页面不仅具有动态的转圈圈动画，还可以根据实际需求进行定制和扩展。希望本文对你在 Web 开发中创建 Loading 页面有所帮助。 本文参考于原贴网址, 以及博客园【梦想天空】博主推荐

avatar
文章
阅读
粉丝