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

2023-11-17

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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

【vue】实现首屏加载等待动画避免首次加载白屏尴尬的相关文章

密钥交换算法DH（Java实现）

密钥交换算法 DH 1 简述 1976年 W Diffie和M Hellman在发表的论文中提出了公钥加密算法思想但当时并没有给出具体的实施方案原因在于没有找到单向函数也就是消息摘要算法但在该论文中给出了通信双方通过信息交换协商密钥
Linux删除任务未执行排查解决

写了一个定时删除日志的脚本用于删除超过30天的日志到了指定的时间发现定时任务并没有执行 find usr local tomcat logs mtime 30 name log exec rm rf 百思不得其解之际将命令逐段执行f
Shell脚本编写教程【一】——Shell 变量

Shell脚本编写教程一 Shell 变量目录 https blog csdn net shn111 article details 131590488 参考教程 https www runoob com linux linux she
github使用入门之GIT GUI Windows版

申明下是原创这二天网上也看了不少关于github使用的文章 github对代码管理也开始用起来了这篇给github新手看大牛们请跳过 github说白了就是版本管理库最常用的就是程序代码管理了不过我也在github上看到有人在用它

随机推荐

python or的用法_python and or用法详解

and 和 or 是python的两个逻辑运算符可以使用and or来进行多个条件内容的判断下面通过代码简单说明下and or的用法 1 or 当有一个条件为真时该条件即为真逻辑图如下测试代码如下 a raw input plea
ipconfig命令

ipconfig命令 ipconfig release 释放 IP 地址租约 ipconfig flushdns 清除本地 DNS 缓存 ipconfig displaydns 显示本地 DNS 内容 ipconfig registerdn
SQL知识整理一：触发器、存储过程、变量表、临时表

pre class javascript dd2 draggable proxy clone 一触发器 create trigger tr name on table view for after instead of update in
大数据课程L8——网站流量项目的SparkStreaming整合代码

文章作者邮箱 yugongshiye sina cn 地址广东惠州本章节目的掌握网站流量项目的工程Pom配置文件代码掌握网站流量项目的SparkStreaming整合Kafka代码掌握网站流量项目的SparkStreaming整合
电机高频注入原理_STM32 TALK

电机在各种应用中都是最广泛最核心的存在随着传统应用转变翻新新兴应用层出不穷这几年的电机界如果不会FOC 都不好意思说自己是做电机的八月底在电堂联合ST举办的 STM32 TALK 电机控制私享会上艾思科技作为STM32的
图像仿射变换原理1：齐次坐标来龙去脉详解

老猿Python博文目录 https blog csdn net LaoYuanPython 仿射变换博文传送门带星号的为付费专栏文章图像仿射变换原理1 齐次坐标来龙去脉详解图像仿射变换原理2 矩阵变换线性变换和图像线性变换矩阵图
[刷题记录]牛客面试笔刷TOP101

牛客笔试算法必刷TOP101系列每日更新中主要是记录自己的刷题所以描述的可能不是很清楚但如果刚好能帮助到你就更好了后续后头复习的时候记得是看正解啊别对着错的例子傻傻看了目录 1 合并有序链表2023 9 3 2 链表是否有环
第14.18节爬虫实战4： request+BeautifulSoup+os实现利用公众服务Wi-Fi作为公网IP动态地址池

写在前面本文相关方法为作者独创仅供参考学习爬虫技术使用请勿用作它途禁止转载一引言在爬虫爬取网页时有时候希望不同的时候能以不同公网地址去爬取相关的内容去网上购买地址资源池是大部分人员的选择老猿所在的环境有电信运输商部署的对
[Python学习] 专题五.列表基础知识二维list排序、获取下标和处理txt文本实例

通常测试人员或公司实习人员需要处理一些txt文本内容而此时使用Python是比较方便的语言它不光在爬取网上资料上方便还在NLP自然语言处理方面拥有独到的优势这篇文章主要简单的介绍使用Python处理txt汉字文字二维列表排序和获取
橘子学java之java中的协程

一关于协程最近jdk19上了 java开始支持虚拟线程了也就是所谓的协程 java的协程库是官方是这个https openjdk org projects loom 我指的是oracle的java 阿里那个well的早就支持了只是官
stm32——Fatfs文件系统读写文件

因项目需求需要移植fatfs文件系统参考了正点原子的战舰例程使用mcu为stm32f103zet6 spi的sd卡模块 8Gsd卡例程为mini板 mcu stm32f103rct6 的 ALIENTEK MINISTM32 实验29
【详解】指令系统中跳转指令与OF,SF,CF,ZF的关系

目录无符号跳转表示法有符号跳转表示法无符号跳转表示法详解有符号跳转表示法详解无符号跳转表示法小于大于等于小于等于大于有符号跳转表示法小于大于等于小于等于大于无符号跳转表示法详解我在学习这部分的最大的困惑点就是
TensorboardX和Tensorboard的介绍及使用

提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档文章目录一 Tensorboard是什么 conda环境安装二 Tensorboard可供显示的内容三 Tensorboard使用步骤 1 标量SCALARS 2 图片
Dubbo和Spring Cloud微服务架构对比

Dubbo和Spring Cloud微服务架构对比微服务架构是互联网很热门的话题是互联网技术发展的必然结果它提倡将单一应用程序划分成一组小的服务服务之间互相协调互相配合为用户提供最终价值虽然微服务架构没有公认的技术标准和规范或
动态代理模式（实例化详解）

简介代理模式通常用于达到对原有系统功能进行扩充的目的比如你刚接手一个别人没有完成的项目这是你不想动别人原理的代码还需要添加新功能这时代理模式这时代理模式这时代理模式会很好的帮助解决问题代理模式分为两种静态代理模式动态代
蓝桥杯2021年第十二届真题第一场-砝码称重

题目题目链接题解动态规划状态定义 dp i j 表示前i个砝码是否能称出重量为j的物品状态转移对于第i个砝码选和不选两种情况对于选又可以分为放在左边和放在右边看样例存在加和减的情况也就是放在左边和右边的情况我们规定放
爬虫日常-12306自动购票程序

文章目录前言页面分析代码设计前言 hello兄弟们最近在钻研新鲜知识一不留神没想起来更新今天我们顺着前面几篇文章完整的写出一篇12306的自动购票软件首先把我们已经写完的前期步骤代码再顺一遍 from selenium we
IDEA常用快捷键集合(详解)

keymap中定义的快捷键实在是太多了全部记住几乎不可能但在项目开发或调试的工程中快捷键是绝对的效率工具查询快捷键 CTRL N 查找类 CTRL SHIFT N 查找文件 CTRL SHIFT ALT N 查找类中的方法或变量
msvcp140.dll缺失重新安装的方法【msvcp140.dll修复工具下载安装】

如果您在使用某些应用程序或游戏时遇到了 msvcp140 dll丢失的错误提示那么您需要采取一些措施来解决这个问题以下是几种解决msvcp140 dll丢失的方法 msvcp140 dll解决方法一 1 在浏览器顶部网页搜索 dll修
【vue】实现首屏加载等待动画避免首次加载白屏尴尬

原文链接在线体验 width 100 height 443 src jsfiddle net kajweb qrno8s0g 9 embedded html css result allowfullscreen allowfullscre

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

【vue】实现首屏加载等待动画 避免首次加载白屏尴尬 的相关文章

随机推荐

热门标签

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

【vue】实现首屏加载等待动画避免首次加载白屏尴尬的相关文章