全栈开发笔记之功能组件（一）资源预加载页面遮罩层

最新推荐文章于 2023-09-15 09:57:51 发布
最新推荐文章于 2023-09-15 09:57:51 发布
阅读量142 收藏
点赞数
分类专栏： vue 前端 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44215249/article/details/115781792
版权

效果图

在这里插入图片描述

通过vue-cli构建项目之后，编写index.html的内容如下即可：

<!DOCTYPE html>
<html>
  <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, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></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;
      border-top-color: #FFF;
      -webkit-animation: spin 2s linear infinite;
      -ms-animation: spin 2s linear infinite;
      -moz-animation: spin 2s linear infinite;
      -o-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
      z-index: 1001;
    }

    #loader:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -webkit-animation: spin 3s linear infinite;
      -moz-animation: spin 3s linear infinite;
      -o-animation: spin 3s linear infinite;
      -ms-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite;
    }

    #loader:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -moz-animation: spin 1.5s linear infinite;
      -o-animation: spin 1.5s linear infinite;
      -ms-animation: spin 1.5s linear infinite;
      -webkit-animation: spin 1.5s linear infinite;
      animation: spin 1.5s linear infinite;
    }


    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }


    #loader-wrapper .loader-section {
      position: fixed;
      top: 0;
      width: 51%;
      height: 100%;
      background: #7171C6;
      z-index: 1000;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    #loader-wrapper .loader-section.section-left {
      left: 0;
    }

    #loader-wrapper .loader-section.section-right {
      right: 0;
    }


    .loaded #loader-wrapper .loader-section.section-left {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
      -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%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
      -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%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%);
      -webkit-transition: all 0.3s 1s ease-out;
      transition: all 0.3s 1s ease-out;
    }

    .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>
    <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">正在加载系统资源，请耐心等待</div>
        </div>
	</div>
  </body>
</html>
夜长思
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
若依如何去掉“正在加载系统资源，请耐心等待”
猿小白的博客
12-25 8832
本文告诉你如何去掉若依框架中的系统加载动画 首先在找到ruoyi-ui目录中的public目录下的index.html文件 去掉之后的html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="ren...
Vue：首屏加载页实现
weixin_43856797的博客
08-19 2431
众所周知vue项目通常首屏加载会非常慢，在浏览器加载资源时，可以在首屏加入一个loading页面。 首先找到在根目录下的 /pulic/index.html： 在 index.html 中找到我们的id为app的div元素： 示例修改如下： <!-- public/index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <me
解决提示“数据正在加载中，请稍后“的问题
05-07
在加载数据的时候提示数据正在加载中，同时还需要引入一个图片，详细资料http://blog.csdn.net/jiudihanbing/article/details/7544127
【若依】前后端分离部署前端配置二级域名（部署到Nginx上，打开后一直显示正在加载系统资源）
最新发布
qq_23830005的博客
09-15 3695
部署前端文件到nginx上之后，打开页面却一直显示“正在加载系统资源，请耐心等待”字样，无法正常运行。给出解决方案，即配置二级域名
若依框架刷新页面出现 正在加载系统资源，请耐心等待
userzou的博客
06-24 1万+
若依框架vue页面刷新页面出现 正在加载系统资源，请耐心等待 这个在public/index.html注释就没了
Nginx杂谈（持续更新）
m0_53370922的博客
09-19 934
Nginx相关技术
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
01-19
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载 以前对于JavaScript总是在用到的时候在页面上写几个函数，基本没考虑到函数的封装与重用，最近有个项目可能对于这方面要求有点高，所以就研究了下类似...
老男孩python全栈开发学习笔记.zip_Python全栈_harborkyi_python 全栈开发_全栈_老男孩 pyth
09-23
《老男孩Python全栈开发学习笔记》是一部针对Python开发者进阶至全栈开发的重要学习资料。这份压缩包包含了作者harborkyi对于Python全栈开发的深入理解和实践总结，尤其适合那些希望提升自身技能，从单一领域跨越到...
laravel框架学习笔记之组件化开发实现方法
10-15
主要介绍了laravel框架学习笔记之组件化开发实现方法,结合实例形式分析了laravel框架组件化开发相关的实现步骤与操作注意事项,需要的朋友可以参考下
vue静态页面加载之前loading
江湖行骗老中医
02-01 1068
<!DOCTYPE html> <html> <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=devic.
正在加载效果
02-10
正在加载效果,里面分了两种情况,并兼容IE/Chrome,本人原创代码,保证能运行,项目用vs2012开发,没有的把界面直接拉到你项目就可以用的
手撸一个预加载页面，酷炫环形进度条
王龙的博客
08-04 928
高仿格瓦拉生活预加载页面环形进度条——我称之为二龙戏珠。话不多说先上图。 实现思路: 1、自定义一个view，画两个从点变换到半圆的弧形。 需要拓展的功能点: 1、需要展现出一个动画效果。 2、进度条走满的时候需要触发界面的跳转。 3、绘制的控件要有自适应屏幕的能力。功能点，以及实现方式的说明: 实现屏幕适配的方式 //获取屏幕的宽高 重新计算自定义控件的大小 publi
网页预加载层效果（二）
allenmu1982的博客
07-05 148
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ background-col...
Menu
CF1402345274的博客
11-18 331
1112 vue-Cascader 主要讲 1117 权限菜单 当老师学生以不同的身份进入到系统的时候，展示的菜单是不一样的。 手动配置 重要的事： muneList:[{pid:-1,name:“购物车”,id:1,auth:“cart”}] 讲 node.js 的东西 安装 express 跨域的问题，什么是跨域 http 就是协议 async 一定要学会使用箭头函数 这段时间都是练习 递归 :index=“index.to.String()” 变成字符串的数字 vue-menu 手动配置模板 b
Vue设置全局loading（加载动画）功能：
热门推荐
SunPeng的博客
03-04 1万+
Vue设置全局loading（加载动画）功能：
css和html第三部分
m0_45483025的博客
07-07 118
/* 背景 */ .box1{ width: 500px; height: 500px; /* background-color 设置背景颜色 */ background-color: #bfa; /* background-image 设置背景图片
CentOS7系统使用rpm方式安装MySQL5.7
HiterCoder
08-29 1305
参考：https://blog.csdn.net/wudinaniya/article/details/81094578 1、首先去mysql官网下载rpm包，一个是server包一个是client包。官网下载地址：https://www.mysql.com/downloads/ 这里用mysql community server里边的。这里使用的是5.7.x版本了，不使用Mysql8...
好看的html登录遮罩提示加载中,jQuery炫酷页面预加载Loading特效插件
weixin_33643798的博客
06-05 425
fakeLoader.js是一款轻量级的 jQuery 炫酷页面预加载Loading特效插件。它能帮助我们创建一个全屏遮罩效果的旋转loading效果来模拟页面预加载过程。Bower安装bower install fakeloader使用方法在标签中引入fakeLoader.css文件。在页面底部引入jQuery和fakeLoader.min.js文件。基本使用方法：$("#fakeloader"...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

夜长思

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

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

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

打赏作者

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

抵扣说明：

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

余额充值