Vue 三种首页加载等待动画，避免首次加载白屏时间过长

最新推荐文章于 2024-04-13 09:57:11 发布
最新推荐文章于 2024-04-13 09:57:11 发布
阅读量5k 收藏 33
点赞数 9
分类专栏： vue element ui 文章标签： 动画 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sea9528/article/details/113333788
版权

先看效果

第一种

在这里插入图片描述

第二种

在这里插入图片描述

第三种

在这里插入图片描述

代码如下

注意：代码需要在index.html 中书写

第一种效果代码
// index.html  

<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    .chromeframe {
      margin: 0.2em 0;
      background: #ccc;
      color: #000;
      padding: 0.2em 0;
    }
    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
    }
    #loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border-radius: 50%;
      border: 3px solid transparent;
      /* COLOR 1 */
      border-top-color: #FFF;
      -webkit-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -moz-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 2s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
      z-index: 1001;
    }
    #loader:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      /* COLOR 2 */
      border-top-color: #FFF;
      -webkit-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -moz-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
    }
    #loader:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      /* COLOR 3 */
      -moz-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -webkit-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
    }
    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
      }
      100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
      }
    }
    @keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
      }
      100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
      }
    }
    #loader-wrapper .loader-section {
      position: fixed;
      top: 0;
      width: 51%;
      height: 100%;
      background: #7171C6;
      /* Old browsers */
      z-index: 1000;
      -webkit-transform: translateX(0);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateX(0);
      /* IE 9 */
      transform: translateX(0);
      /* Firefox 16+, IE 10+, Opera */
    }
    #loader-wrapper .loader-section.section-left {
      left: 0;
    }
    #loader-wrapper .loader-section.section-right {
      right: 0;
    }
    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
      -webkit-transform: translateX(-100%);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateX(-100%);
      /* IE 9 */
      transform: translateX(-100%);
      /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    .loaded #loader-wrapper .loader-section.section-right {
      -webkit-transform: translateX(100%);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateX(100%);
      /* IE 9 */
      transform: translateX(100%);
      /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    .loaded #loader {
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    }
    .loaded #loader-wrapper {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateY(-100%);
      /* IE 9 */
      transform: translateY(-100%);
      /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.3s 1s ease-out;
      transition: all 0.3s 1s ease-out;
    }
    /* JavaScript Turned Off */
    .no-js #loader-wrapper {
      display: none;
    }
    .no-js h1 {
      color: #222222;
    }
    #loader-wrapper .load_title {
      font-family: 'Open Sans';
      color: #FFF;
      font-size: 19px;
      width: 100%;
      text-align: center;
      z-index: 9999999999999;
      position: absolute;
      top: 60%;
      opacity: 1;
      line-height: 30px;
    }
    #loader-wrapper .load_title span {
      font-weight: normal;
      font-style: italic;
      font-size: 13px;
      color: #FFF;
      opacity: 0.5;
    }
  </style>

</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without 
      Please enable it to continue.</strong>
  </noscript>

  <div id="app">
  //在<div id="app"> 里面加入下列代码
    <div id="loader-wrapper">
      <div id="loader"></div>
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
      <div class="load_title">正在加载系统,请耐心等待
        <br>
        <span>V1.3</span>
      </div>
    </div>
  </div>
</body>

</html>
第二种效果代码
// index.html  

<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
   .first-loading-wrp {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 90vh;
      min-height: 90vh;
    }

    .first-loading-wrp>h1 {
      font-size: 30px;
      font-weight: bolder;
    }

    .first-loading-wrp .loading-wrp {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 98px;
    }

    .dot {
      position: relative;
      box-sizing: border-box;
      display: inline-block;
      width: 64px;
      height: 64px;
      font-size: 64px;
      transform: rotate(45deg);
      animation: antRotate 1.2s infinite linear;
    }

    .dot i {
      position: absolute;
      display: block;
      width: 28px;
      height: 28px;
      background-color: #1890ff;
      border-radius: 100%;
      opacity: 0.3;
      transform: scale(0.75);
      transform-origin: 50% 50%;
      animation: antSpinMove 1s infinite linear alternate;
    }

    .dot i:nth-child(1) {
      top: 0;
      left: 0;
    }

    .dot i:nth-child(2) {
      top: 0;
      right: 0;
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
    }

    .dot i:nth-child(3) {
      right: 0;
      bottom: 0;
      -webkit-animation-delay: 0.8s;
      animation-delay: 0.8s;
    }

    .dot i:nth-child(4) {
      bottom: 0;
      left: 0;
      -webkit-animation-delay: 1.2s;
      animation-delay: 1.2s;
    }

    @keyframes antRotate {
      to {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
      }
    }

    @-webkit-keyframes antRotate {
      to {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
      }
    }

    @keyframes antSpinMove {
      to {
        opacity: 1;
      }
    }

    @-webkit-keyframes antSpinMove {
      to {
        opacity: 1;
      }
    }
  </style>

</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>

  <div id="app">
  //在<div id="app"> 里面加入下列代码
    <div class="first-loading-wrp">
      <div class="loading-wrp">
        <span class="dot dot-spin">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </span>
      </div>
      <h2>努力加载中...</h2>
  </div>
</body>

</html>
第三种效果代码
// index.html  

<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    .chromeframe {
      margin: 0.2em 0;
      background: #409EFF;
      color: #000;
      padding: 0.1em 0;
    }

    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
      background-color: white;
    }

    #loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 50px;
      height: 50px;
      margin: -25px 0 0 -25px;
      border-radius: 50%;
      border: 3px solid transparent;
      /* COLOR 1 */
      border-top-color: #409EFF;
      -webkit-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -moz-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 2s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
      z-index: 1001;
    }

    #loader:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      /* COLOR 2 */
      border-top-color: #409EFF;
      -webkit-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -moz-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #409EFF;
      /* COLOR 3 */
      -moz-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -webkit-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
    }


    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
      }
      100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
      }
    }

    @keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
      }
      100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
      }
    }

    .loaded #loader {
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    }

    .loaded #loader-wrapper {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateY(-100%);
      /* IE 9 */
      transform: translateY(-100%);
      /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.3s 1s ease-out;
      transition: all 0.3s 1s ease-out;
    }

    /* JavaScript Turned Off */

    .no-js #loader-wrapper {
      display: none;
    }

    .no-js h1 {
      color: #222222;
    }

    #loader-wrapper .load_title {
      font-family: 'Open Sans';
      color: #409EFF;
      font-size: 19px;
      width: 100%;
      text-align: center;
      z-index: 9999999999999;
      position: absolute;
      top: calc(50% + 60px);
      opacity: 1;
      line-height: 30px;
    }
  </style>

</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>

  <div id="app">
      <div id="loader-wrapper">
          <div id="loader"></div>
          <div class="load_title">正在加载，请耐心等待!</div>
      </div>
  </div>
</body>

</html>
sea9528
关注
  • 9
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
Vue - 详细实现网站首屏加载等待动画，在 vue 网页项目中实现页面加载时出现动画，解决加载白屏问题（提供详细示例代码，支持自定义 CSS 动画或 GIF 动图等）
王佳斌
01-27 7552
效果图 前言 解决白屏等待方案非常多，个人而言评判好坏的标准即 用最少最简单的代码实现相同的功能。 在 Vue 项目中，网站加载时会显示自定义动画（CSS），当文件加载完毕且页面显示时自动移除动画。 解决方案 原理：动画元素放置在 #app 内，Vue 生命周期开始时，会自动清掉 #app 下所有元素。 您可以打开控制台，将网速调慢后，观察 Elements 元素，当页面呈现的时候 <div id="app"></div> 就会被清除， 打开您的项目，找到根目录 pub
Vue3项目中加载动画的实现
最新发布
fafafafa_fa的博客
05-24 738
正常路由的引入方式通常会导致网页首屏加载时间过长，给用户带来不好的体验，所以我们通常使用路由懒加载的方式来引入路由，这样只会在使用到某个路由时才会去加载它，减少了初次加载的时间。
Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案
朝花夕拾的博客
08-10 4042
html页面同样也要根据传递过来不同的参数 去调整自己的逻辑，首先知道html是如何接收到vue传来的消息的，window监听message即可接收postMessage发送来的消息。通过window.parent['vue里面绑定的名称']（需要传递的参数） 可以定义一个对象来传参 这种方法就可以调用到vue里面的方法啦！html页面接收时是通过message统一接收的，针对发送多个消息的情况下， 我们这里做下区分，将html页面通过iframe的方式嵌入进来之后，发现页面是空白的，不显示任何元素，
Vue实现网页首屏加载动画、页面内请求数据加载loading
热门推荐
在写作的路上持续输出。
11-17 1万+
Vue实现网页首屏加载动画、页面内请求数据加载loading
Vue-动画效果
见证自己学习,成长的记录
06-22 3524
接下来给我们的案例新增d点简单的动画效果，这里写两个，from(来),to(去)两个动画，编写动画其实就是定义动画 这里我定义了一个show的动画(动画名称随意，但是用的时候要对得上！vue不跟动画名进行对话，而是样式的类名作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。写法：准备好样式：v-enter：进入的起点v-enter-active：进入过程中v-enter-to：进入的终点v-leave：离开的起点v-leave-active：离开过程中。
Vue3实现滚动加载动画效果
delete_you的博客
03-14 3185
引入wow.js以及animate.css两个动画库，实现滚动到指定位置自动播放动画的效果
vue页面加载动画
qq_46617584的博客
03-01 332
vue页面加载动画
常用loading加载效果集及vue实现加载动画
pscool的博客
03-28 3482
思路：只需要先把loading的盒子摆在正中间，然后，里面的每个item都使用绝对定位，并且水平垂直居中，然后先旋转，再位移，就可以呈现一个环状，接着指定动画，并设置延迟即可。（其实，下边并不需要给loading指定大小，这样就不用设置上下左右都是0，margin是auto了） <style lang="scss"> body { margin: 0; } .modal { background: #202020; hei
推荐一款Vue.js加载动画库：Vue-Loading-Spinner
gitblog_00099的博客
04-13 422
推荐一款Vue.js加载动画库：Vue-Loading-Spinner 项目地址:https://gitcode.com/nguyenvanduocit/vue-loading-spinner 在现代Web开发中，用户体验是至关重要的因素之一，特别是在处理异步数据或页面加载时。为了提供平滑且有吸引力的用户体验，Vue-Loading-Spinner 是一个值得推荐的开源项目。它是一个轻量级的Vue...
CSS动画——加载的菊花转动画
W1500507463的博客
01-15 771
CSS动画—加载的菊花转动画
Vue解决首屏加载缓慢的首屏优化秒开(亲测有效)
qq_41429765的博客
07-07 2794
在vue.config.js文件中（1）.使用chainWebpack配置的方式（1）首先在public/index.html文件中将Vue或UI相关的js包引入main.js文件中的修改，将引入的import引入vue这个去掉，然后直接使用Vue注册vant,这个vant也不需要引入，因为在步骤一里面已经引入了vant.js包router.js文件的修改,去掉引入Vue，不引入vue-router,直接注册VueRouteraxios.js文件的修改，不需要引入axios直接使用。
网页设计方案中的页面加载动画技巧
light86的专栏
03-04 447
网页设计方案中的页面加载动画技巧
vue嵌入视频进入首页
qq_41298861的博客
07-28 854
第一种形式 安装依赖： npm install vue-video-player --save main.js文件中引用： import VideoPlayer from ‘vue-video-player’ require(‘video.js/dist/video-js.css’) require(‘vue-video-player/src/custom-theme.css’) Vue.use(VideoPlayer) 新建videoPlayerPage.vue文件，视频播放界面 <templat
vue3骨架屏数据渲染加载动画
shuleijia的博客
01-11 492
vue3骨架屏数据渲染加载动画
loading.io 常用首页加载动画效果
masju的博客
06-06 659
新颖的loading动画效果 2、吃豆子效果 3、圆形旋转 4.双圆形 5、方块效果
【vue】实现首屏加载等待动画 避免首次加载白屏尴尬
林毅洋
10-04 6408
原文链接 在线体验 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;meta charset=&amp;amp;amp;quot;utf-8&amp;a
环形进度条-带加载动画(Vue3+TS)
weixin_46873254的博客
06-18 1414
自定义环形进度条组件
vue实现首屏加载等待动画 避免首次加载白屏尴尬
weixin_34033624的博客
06-27 1887
0 直接上效果图 1背景，用户体验良好一直是个重要的问题。 2怎么加到自己项目里面？ 复制css html代码到自己的index.html即可 代码链接 源码地址 Vue学习前端群493671066，美女多多。老司机快上车，来不及解释了。 作者相关Vue文章 基于Vue2.0实现后台系统权限控制 前端文档汇总 VUE2.0增删改查附编辑添加model(弹框)组件共用 打赏 衷心的表示感谢 ...
vue3 首屏幕加载动画
09-02
在Vue3中实现首屏加载动画，你可以参考以下步骤： 1. 首先，在你的Vue项目中创建一个全局加载组件，用于展示加载动画。你可以在组件中使用CSS或动画库来定义你想要的加载效果。 2. 在你的根组件（通常是App.vue）中引入并注册这个全局加载组件。 3. 在页面加载的过程中，使用Vue的生命周期钩子函数（如created或mounted）来控制加载动画的显示和隐藏。在页面加载之前，显示加载动画；加载完成后，隐藏加载动画。 4. 如果你想要自定义加载动画的样式，你可以在全局加载组件中定义样式，并在组件中使用<slot>标签来插入内容。 5. 最后，你可以根据你的需求在加载动画组件中添加文本或图标来显示加载状态，以提供更好的用户体验。 请注意，加载动画和数据请求的组件不应同时使用，以免出现两个加载效果。另外，要谨慎使用全局加载动画，因为它会在整个应用程序中显示。 这是一个简单的示例代码，展示了如何在Vue3中实现首屏加载动画： ```vue // 在全局加载组件中定义加载动画的样式和内容 <template> <div class="loading"> <div class="loader"></div> <p>Loading...</p> </div> </template> <script> export default { name: 'Loading', // 根据需要可以添加进入、离开过渡效果 // 可以使用CSS或动画库定义加载动画的样式 // 在created或mounted钩子函数中控制显示和隐藏 created() { // 显示加载动画 }, mounted() { // 隐藏加载动画 } } </script> // 在根组件中引入并注册全局加载组件 <template> <div id="app"> <router-view /> <Loading v-if="isLoading" /> </div> </template> <script> import Loading from '@/components/Loading.vue'; export default { name: 'App', components: { Loading }, data() { return { isLoading: true } }, created() { // 页面加载前显示加载动画 }, mounted() { // 页面加载完成后隐藏加载动画 } } </script> ``` 这样，当你的Vue应用程序加载时，首屏将会显示加载动画，加载完成后加载动画将会被隐藏。你可以根据自己的需求自定义加载动画的样式和内容。记得根据实际情况在合适的生命周期钩子函数中控制加载动画的显示和隐藏。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue实现页面加载动画效果](https://download.csdn.net/download/weixin_38721565/12772582)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue实现网页首屏加载动画、页面内请求数据加载loading](https://blog.csdn.net/weixin_48337566/article/details/127896990)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sea9528

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值