【vue】实现首屏加载等待动画 避免首次加载白屏尴尬

最新推荐文章于 2024-07-29 20:07:29 发布
最新推荐文章于 2024-07-29 20:07:29 发布
阅读量6.4k 收藏 17
点赞数 3
分类专栏： vue

原文链接
在线体验
效果图

width="100%" height="443" src="//jsfiddle.net/kajweb/qrno8s0g/9/embedded/html,css,result/" allowfullscreen="allowfullscreen"> 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>nx-admin</title>
  <style>
    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>
  <!-- built files will be auto injected -->
  <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">正在加载 nx-admin,请耐心等待
        <br>
        <span>V1.3</span>
      </div>
    </div>
  </div>
</body>
</html>
林毅洋
关注
专栏目录
Vue - 详细实现网站首屏加载等待动画，在 vue 网页项目中实现页面加载时出现动画，解决加载白屏问题（提供详细示例代码，支持自定义 CSS 动画或 GIF 动图等）
王佳斌
01-27 7704
效果图 前言 解决白屏等待方案非常多，个人而言评判好坏的标准即 用最少最简单的代码实现相同的功能。 在 Vue 项目中，网站加载时会显示自定义动画（CSS），当文件加载完毕且页面显示时自动移除动画。 解决方案 原理：动画元素放置在 #app 内，Vue 生命周期开始时，会自动清掉 #app 下所有元素。 您可以打开控制台，将网速调慢后，观察 Elements 元素，当页面呈现的时候 <div id="app"></div> 就会被清除， 打开您的项目，找到根目录 pub
Vue3 - 实现网页白屏加载期间自动插入 “自定义“ 加载 loading 动画，每当页面打开加载时就会自动显示动画或图片文件（全局注入网站首屏加载等待动画，利用动态图或动画解决长时间白屏的问题）
王佳斌
09-15 2668
vue3 vite网站项目，vue3加载动画，vue3网站加载时怎么加入动画，vue3实现网页首屏加载动画、页面内请求数据加载loading，vue3实现loading加载动画，前端vue3加载中页面动画弹跳动画，Vue3防止白屏添加首屏动画的实例，vue3项目加载之前添加加载动画，Vue3首屏加载等待动画，vue3首屏添加加载动画，vue3页面加载动画，vue3首次加载页面时白屏怎么加入加载动画图片，vue3页面加载时怎么用一张gif图做加载动画，vue3如何显示页面白屏加动画过渡，Vue3设置全局loa
vue实现首屏加载等待动画 避免首次加载白屏尴尬
weixin_34033624的博客
06-27 1907
0 直接上效果图 1背景，用户体验良好一直是个重要的问题。 2怎么加到自己项目里面？ 复制css html代码到自己的index.html即可 代码链接 源码地址 Vue学习前端群493671066，美女多多。老司机快上车，来不及解释了。 作者相关Vue文章 基于Vue2.0实现后台系统权限控制 前端文档汇总 VUE2.0增删改查附编辑添加model(弹框)组件共用 打赏 衷心的表示感谢 ...
vue实现简易的全局加载动画效果
最新发布
Zwwxd666的博客
07-29 644
v-show绑定loading，该数据可以放vuex还是任一的公共状态管理变量区域。然后App应用这个组件，Z index拉最大，防止用户在加载动画时乱点，封装一个组件，放Img，伪类样式，固定在屏幕fixed。//组件交互相关的代码(数据、方法等等)
关于vue首屏加载loading问题
web那些事
09-04 932
<div class="loading">
vue首屏加载动画
Heartnottowake的博客
02-21 433
直接替换vue里面的html页面即可。
Vue首屏加载等待动画
风口浪尖的猪吖
09-09 2750
vue实现首屏加载等待动画 避免首次加载白屏尴尬的俩种实现方式 1.第一种效果代码 index.html中添加以下代码 <style type="text/css"> .first-loading-wrp { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 90vh; min-he
vue首屏优化之骨架屏
云之彼端的博客
10-09 826
为什么要使用骨架屏 在针对SPA应用进行首屏优化的时候，我们是尽可能地减少白屏时间，使首屏内容尽早的展现出来，可因为SPA应用的特性用JS绘制dom，在js未加载完成时dom不会被绘制出来，所以虽然白屏时间可以通过减少http请求，压缩请求体积，懒加载等各种方法来缩短，但根本上是无法清除的。短暂的白屏会被用户不好的体验，常用的做法可以在内容未加载出来前添加一个loading的动画，今天介绍的骨架屏...
vue路由首次加载会白屏，刷新之后就好了
05-12
这可能是因为你的Vue应用在首次加载时需要加载一些数据或资源，而这些加载需要一定的时间，导致页面出现白屏。当你刷新页面时，这些数据或资源已经加载完成，因此页面就可以正常显示了。 为了解决这个问题，你可以...
Vue自定义指令完成白屏loading加载需求
minamiyanastuki的博客
08-19 1249
需求背景: 项目中图片资源过大，项目部署后压缩后首次加载也需要较长时间。这时候我们可以在该页面的mounted钩子中添加一个白屏覆盖住页面,然后添加loading，然后监听到所有图片加载完成后把白屏和loading去除。 用较低的带宽模拟 此时我们可以利用图片的onload 函数来判断当前图片是否加载完全 在vue的mounted钩子中对当前组件内所有的图片添加onload export default { name: 'cxk', computed: {...
vue项目首屏加载动画
renyudouhui的博客
06-09 1396
首先在index.html中做动画，由于拿不到dom元素。需要手动去创建 let animateTimer; // 创建loading的盒子 function loadingBox() { const html = document.documentElement const loadBox = document.createElement("div"); loadBox.className = "first-loading" html.app
vue实现页面加载动画效果
08-29
主要为大家详细介绍了vue实现页面加载动画效果，vue页面出现正在加载的初始页面与实现动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vuedom动画版（路由拆分按需加载）
11-14
路由按需加载，动画切换流畅版dome，没太多代码，适合初学者研究。
Vue实现网页首屏加载动画、页面内请求数据加载loading
热门推荐
在写作的路上持续输出。
11-17 1万+
Vue实现网页首屏加载动画、页面内请求数据加载loading
Vue--网站首屏加载等待动画（极简解决方案）
图南的博客
11-03 1111
解决白屏等待方案非常多，个人而言评判好坏的标准即用最少最简单的代码实现相同的功能。在Vue项目中，网站加载时会显示自定义动画（CSS），当文件加载完毕且页面显示时自动移除动画。
axios vue 加载效果动画_Vue 使用 axios 或者 vue-router 配置页面加载动画
weixin_39686353的博客
12-21 278
先提一笔，这篇文章是关于 Vue 页面加载动画的实现以下介绍两种方法使用 axios 配置全局中当发生 ajax 请求时，显示一个加载动画，当 ajax 请求结束后，隐藏加载动画使用 Vue-router 实现当页面跳转时有一个加载动画第一种方式， 配置 axios 实现加载动画在 axios 的拦截器中实现1. 在 App.vue 文件中添加你的加载动画组件 或者 HTML，因为加载动画是全局的...
VUE首屏加载loading效果
qq_33396303的博客
02-22 3602
在使用乾坤微前端框架中，遇见图片资源路径存在访问问题，在不搭CDN的情况下，使用base64方式将图片资源打入代码。这样会导致包体积过大,加载时间长； 所以加了一个loading效果； 1.在index.html入口增加 loading； <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content=
React 、Vue进度 条首屏加载制作
程序员小刘
12-30 1029
React是用于构建用户界面的JavaScript库， [1]起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。大家上面看到的两张图，就是我们常见的开屏动画，一般这种开屏动画，一般用于加载项目的初始化，动画，大概2秒左右，适合用于启动慢的项目，能够让我的注意力关注到这个动画上面。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值