分享一个有趣的前端Loading效果（前端loading）

太过爱你忘了你带给我的痛 2024-04-24 15:04 60阅读 0赞

#### 简介：前端中的“loading”通常指的是页面加载过程中的加载状态，用于向用户显示页面正在加载的提示。它可以是一个旋转的加载图标、进度条、动画等形式，目的是为了让用户知道页面正在加载，并且等待的时间可能会持续一段时间。这里来分享几个好看的loading效果 ####

#### 一、先看一下效果 ####

![d5b86a93ca084796be72b99c38bd2f10.gif][]

#### 二、具体使用过程 ####

#### 1、直接将loading元素定位到父元素上面 ####

// HTML
    <div class="loading_style"></div>
    
    // CSS
    ::v-deep .loading_style {
        width: 100%;
        height: 100%;
        z-index: 1000;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(255, 255, 255, 0.473);
        background-image:
            linear-gradient(90deg,
                rgba(#fff, 0),
                rgba(#fff, 0.5),
                rgba(#fff, 0));
        background-size: 40px 100%;
        background-repeat: no-repeat;
        background-position: left -40px top 0;
        animation: shine 1s ease infinite;
    }
    // 定义动画
    @keyframes shine {
        to {
            background-position: right -40px top 0;
        }
    }

#### 2、定义一个取消loading的功能函数 ####

// 取消loading
    cancelLoading() {
          const loadingStatus = document.querySelector(".loading_style");
          loadingStatus ? loadingStatus.remove() : "";
    },

#### 3、请求成功时调用，清除loading ####

调用函数，取消状态
    if (res.code === 200) { this.cancelLoading(); }

[d5b86a93ca084796be72b99c38bd2f10.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/ed71180e63924564a0eb37a99faf10b6.gif