前端开发小技巧 - 【Vue】+【CSS】 - 加载动画

前言

  • 本文是基于 【Vue3 + Vite】写的;
    • Vue2要使用的话,只需对一些基本语法进行更改即可使用;
  • 我是将这个加载动画封装成了一个组件,父组件通过传递一些属性进行样式定义;
    • 我会在下文中对每个属性进行标注,方便大家参考;
  • 效果展示:
  • 本文的代码是跟着抖音上一位大佬敲的😂😂(我忘记那个Up主的昵称是啥了😂😂);

一、将加载动画封装成一个组件

html 复制代码
<script setup>
defineProps({
  // 控制加载动画盒子的大小、背景色
  loadingStyle: {
    type: Object,
    default: () => ({
      width: "500px",
      height: "200px",
      backgroundColor: "#252839"
    })
  },
  // 控制动画字体的大小和颜色
  textStyle: {
    type: Object,
    default: () => ({
      color: "#252839",
      fontSize: "100px"
    })
  },
  // 动画时长
  animationTime: {
    type: String,
    default: "3s"
  }
});
</script>

<template>
  <div class="loading" :style="loadingStyle">
    <!-- 如果要对此处的加载动画的文本进行修改,也需要对下面伪元素中的 content 属性值进行修改,保持两者一致 -->
    <h2 class="loading-text" :style="textStyle">Loading...</h2>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-text {
  position: relative;
  -webkit-text-stroke: 0.2vw #b6b6b6; /*文字描边效果*/
}

.loading-text::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "Loading...";
  width: 100%;
  height: 100%;
  border-right: 2px solid #01fe87;
  color: #01fe87;
  -webkit-text-stroke: 0vw #383d25;
}

.loading-text::before {
  width: 0;
  overflow: hidden;
  animation: animate v-bind(animationTime) linear infinite alternate;
}

@keyframes animate {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
</style>

二、使用组件

html 复制代码
<script setup>
import Loading from "@/views/Loading.vue";
</script>

<template>
  <Loading :loadingStyle="{ width: '600px', height: '300px', backgroundColor: '#252839' }" />
</template>

<style scoped></style>
相关推荐
脑袋大大的21 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0130 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆3 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui