Vue3+Ts+Vite项目(第十一篇)——项目启动loading加载效果

礼貌而已

已于 2023-09-09 10:45:07 修改

阅读量1.5k

点赞数 2

分类专栏： # Vue3从零到一项目实战文章标签： vue.js typescript elementui

于 2023-08-21 20:31:54 首次发布

本文链接：https://blog.csdn.net/qq_61402485/article/details/132416025

版权

Vue3从零到一项目实战专栏收录该内容

17 篇文章 54 订阅

订阅专栏

简介

一分钟实现 vue-pure-admin 同款项目加载时的 loading 效果

一、先看效果

1.1 静态效果

在这里插入图片描述

1.2 动态效果

请添加图片描述

二、上代码

核心代码在body里面，代码中已标明。找到你项目的 index.html ，复制粘贴进去即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
    />
    <title>vue-pure-admin</title>
    <link rel="icon" href="/favicon.ico" />
    <script>
      window.process = {};
    </script>
  </head>

  <body>
    // 核心代码-开始
    <div id="app">
      <style>
        html,
        body,
        #app {
          width: 100%;
          height: 100%;
          display: flex;
          position: relative;
          justify-content: center;
          align-items: center;
          overflow: hidden;
        }

        .loader,
        .loader:before,
        .loader:after {
          border-radius: 50%;
          width: 2.5em;
          height: 2.5em;
          animation-fill-mode: both;
          animation: loadAnimation 1.8s infinite ease-in-out;
        }

        .loader {
          color: #406eeb;
          font-size: 10px;
          margin: 80px auto;
          position: relative;
          text-indent: -9999em;
          transform: translateZ(0);
          animation-delay: -0.16s;
          top: 0;
          transform: translate(-50%, 0);
        }

        .loader:before,
        .loader:after {
          content: "";
          position: absolute;
          top: 0;
        }

        .loader:before {
          left: -3.5em;
          animation-delay: -0.32s;
        }

        .loader:after {
          left: 3.5em;
        }

        @keyframes loadAnimation {
          0%,
          80%,
          100% {
            box-shadow: 0 2.5em 0 -1.3em;
          }

          40% {
            box-shadow: 0 2.5em 0 0;
          }
        }
      </style>
      <div class="loader"></div>
    </div>
    // 核心代码-结束
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>