vue遮罩加载动画（可以当作全屏弹窗）-CSDN博客

本文链接：https://blog.csdn.net/weixin_44701367/article/details/131712517

该代码示例展示了如何在Vue应用中创建一个加载动画和遮罩层。加载动画由五个动画的span元素组成，使用CSS关键帧动画实现动态效果。遮罩层则是一个全屏半透明黑色背景，点击时可触发相应方法。Vue组件结合JavaScript处理了遮罩层的高度适配，确保其覆盖整个视口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果：

在这里插入图片描述

加载动画部分：

 <div id="app-cockpit-loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
 </div>

<style media="screen" type="text/css">#app-cockpit-loading{width:120px;height:40px;position:absolute;font-size:50px;line-height:50px;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);}#app-cockpit-loading span{display:inline-block;width:8px;height:100%;border-radius:4px;background:#1890ff;-webkit-animation:load 1s ease infinite;}@-webkit-keyframes load{0%,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-delay:0.4s;}#app-cockpit-loading span:nth-child(4){-webkit-animation-delay:0.6s;}#app-cockpit-loading span:nth-child(5){-webkit-animation-delay:0.8s;}</style>

遮罩部分：

<template>
  <div id="app">
    <div id="mask" ref="mask" @click="mask()"></div>
  </div>
</template>

钩子：
mounted() {
  this.$refs.mask.style.height = window.document.getElementById('app').clientHeight + 'px'
},

样式：
#mask{
  width: 100%;
  opacity: 0.6;
  background-color: black;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 998;
}
.mask_img{
  width: 316px;
  height: 200px;
  z-index: 999;
  position: fixed;
  right: 0px;
}

VUE组件

<template>
  <div id="app">
    <div id="mask" ref="mask" @click="mask()">
      <div id="app-cockpit-loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "loading",
  mounted() {
    this.$refs.mask.style.height = window.document.getElementById('app').clientHeight + 'px'
  },
  methods: {

  }
}
</script>

<style media="screen" type="text/css">#app-cockpit-loading{width:120px;height:40px;position:absolute;font-size:50px;line-height:50px;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);}#app-cockpit-loading span{display:inline-block;width:8px;height:100%;border-radius:4px;background:#1890ff;-webkit-animation:load 1s ease infinite;}@-webkit-keyframes load{0%,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-delay:0.4s;}#app-cockpit-loading span:nth-child(4){-webkit-animation-delay:0.6s;}#app-cockpit-loading span:nth-child(5){-webkit-animation-delay:0.8s;}</style>

<style>
#mask{
  width: 100%;
  opacity: 0.6;
  background-color: black;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 998;
}
.mask_img{
  width: 316px;
  height: 200px;
  z-index: 999;
  position: fixed;
  right: 0px;
}
</style>