Vue实现网页首屏加载动画页面内请求数据加载loading

Posted 水香木鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue实现网页首屏加载动画页面内请求数据加载loading相关的知识，希望对你有一定的参考价值。

博主介绍

📢点击下列内容可跳转对应的界面，查看更多精彩内容！

🍎主页：水香木鱼
🍍专栏：后台管理系统

文章目录

简介：这是一篇有关【Vue实现网页首屏加载动画、页面内请求数据加载loading】的文章，博主用最精简的语言去表达给前端读者们。

四圆点 漩涡 电池状态 请求数据加载loading 齿轮gif图片效果

使用范例：public/index.html【完整代码】

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <!-- 加载动画 -->
    <style>html,body,#appwidth:100%;height:100%;.d2-homebackground-color:#303133;height:100%;display:flex;position:relative;.d2-home__mainposition:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);.d2-home__footerwidth:100%;flex-grow:0;text-align:center;padding:1em 0;.d2-home__loadingheight:82px;width:82px;</style>
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but test doesn't work properly without javascript enabled.
        Please enable it to continue.</strong
      >
    </noscript>
    <div id="app">
      <!-- 动画节点 -->
      <div class="d2-home__main">
        <img
          class="d2-home__loading"
          src="./image/20180919030732834.gif"
          alt="loading"
        />
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

注意：“加载动画不可与请求数据的组件同时使用!” 否则会出现两个加载效果。

  • 在public/index中使用需要谨慎，因为这是全局加载的。
  • 建议使用loading组件

1、四圆点加载动画

压缩版样式文件：

<style>#loading-maskposition:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden.loading-wrapperposition:absolute;top:50%;left:50%;transform:translate(-50%,-100%).loading-dotanimation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box.loading-dot iwidth:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate.loading-dot i:nth-child(1)top:0;left:0.loading-dot i:nth-child(2)top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s.loading-dot i:nth-child(3)right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s.loading-dot i:nth-child(4)bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s@keyframes antRotateto-webkit-transform:rotate(405deg);transform:rotate(405deg)@-webkit-keyframes antRotateto-webkit-transform:rotate(405deg);transform:rotate(405deg)@keyframes antSpinMovetoopacity:1@-webkit-keyframes antSpinMovetoopacity:1</style>

动画节点：

在id=“app” 标签内加入

<!-- 动画节点 -->
<div id="loading-mask">
  <div class="loading-wrapper">
     <span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span>
  </div>
</div>

2、旋涡加载动画

压缩版样式文件：

  <style>html,body,#appheight:100%;margin:0px;padding:0px;.chromeframemargin:0.2em 0;background:#ccc;color:#000;padding:0.2em 0;#loader-wrapperposition:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;#loaderdisplay: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:beforecontent:"";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:aftercontent:"";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 spin0%-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);100%-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);@keyframes spin0%-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-sectionposition:fixed;top:0;width:51%;height:100%;background:#1890ff;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);#loader-wrapper .loader-section.section-leftleft:0;#loader-wrapper .loader-section.section-rightright: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 #loaderopacity:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;.loaded #loader-wrappervisibility: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-wrapperdisplay:none;.no-js h1color:#222222;#loader-wrapper .load_titlefont-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 spanfont-weight:normal;font-style:italic;font-size:13px;color:#FFF;opacity:0.5;</style>

动画节点：

在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>V0.1</span>
  </div>
</div>

3、电池状态加载动画

压缩版样式：

<style media="screen" type="text/css">#app-cockpit-loadingwidth:120px;height:40px;position:absolute;font-size:50px;line-height:50px;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);#app-cockpit-loading spandisplay:inline-block;width:8px;height:100%;border-radius:4px;background:#1890ff;-webkit-animation:load 1s ease infinite;@-webkit-keyframes load0%,100%height:40px;background:#1890ff;50%height:70px;margin:-15px 0;background:lightblue;#app-cockpit-loading span:nth-child(2)-webkit-animation-delay:0.2s;#app-cockpit-loading span:nth-child(3)-webkit-animation-delayVUE2--封装loading组件


 爬虫之动态获取数据


 vue项目首屏加载优化


 应对网页图片懒加载 𸥏


 修改安卓首屏画面 与加载动画


 图片懒加载