手撸一个精美简约loading加载功能，再也不怕复杂的网页效果了

我来看看怎么个事？

你们还记得自己为什么要做程序员吗？我先来说，就是看见别人有一个精美的网站。但是，现在很多人要么就是后端crud boy，要么就是前端vue渲染数据girl。没有现成的框架，现成的ui组件，就没法写代码了。好看的网页怎么来呢？有人会说是UI设计的，我前端只需要vue渲染数据就行了🤣（今天我们就不探讨后端技术🐶）。久而久之，自己就会慢慢变菜，最后想开发一个项目，发现无从下手，写个页面都费劲！！！所以，还是慢慢做一个全栈，这样既可以写好玩的工具，也可以提高自己的竞争力，强者恒强，没错就是我啦😅

1.loading实际效果图

字不重要，看图👉👉👉👉

pc端

移动端

2.准备css素材

这种loading的效果，网上有很多网站可以直接diy，几乎没有人手写一个。当然你也可以手写，如果觉得闲的话

推荐网站
国内也有很多，我使用的是国外网站（科学上网）

loading.io/#editor

下载素材推荐svg格式，如果你的svg动图存在背景

如图，这种背景一定要去掉，给svg设置一个透明度，找到svg文件，background属性，设置rgb(255，255，255，0)就可以了，如下图：

3.loading隐藏与显示逻辑

思考🤔：

当我们点击按钮的时候，一般会触发请求，比如请求后台数据，这个时候中间就会有加载的样式。

总结就两个条件：

1.按钮要触发点击事件，开启loading效果

2.需要一个事件完成的状态（标记），关闭loading效果

4.编写looding组件，全局注册组件

<script setup>

</script>

<template>

  <div class="loading">

    <img src="./loading.svg" alt="loading"/>

  </div>

</template>


<style scoped lang="scss">

.loading {

//通过定位，实现loading水平垂直居中

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  img {

    width: 70px;

    height: 70px;

  }

}

</style>

全局注册loading组件

5.登录页面使用loading组件

<script setup>

import {reactive, ref, watch} from "vue";

//模拟请求数据，code===200表示事件完成
const result = reactive({data: [], code: 0})

//判断按钮是否触发点击事件，默认false，按钮没有触发点击
const clickFlag = ref(false)

//按钮提交方法
const submit = () => {
//重置code

  result.code = 0
//标记请求触发

  clickFlag.value = true
//模拟http请求
setTimeout(() => {
//模拟后台数据

    result.data = [{'name': 'bobo', 'age': 12}]
//模拟请求完成

    result.code = 200

  }, 3000)

}
</script>

<template>
<div class="login-container">
<div class="login-box">
<div class="form">
<h2>用户登录</h2>
<div class="content">
<input class="input" type="text" placeholder="请输入账号">
<input class="input" type="password" placeholder="请输入密码">
<button @click="submit" class="button">登录</button>
<!--判断loading 1.有没有点击事件 2.有没有loading终止标记-->
<loading v-show="result.code!==200&&clickFlag"></loading>
</div>
</div>
</div>
</div>
</template>

<style lang="scss" scoped>
.login-container {
.login-box {
.form {
position: relative;
padding: 24px;
text-align: center;
color: rgb(55 65 81);
line-height: 1.75rem;

      }

    }

  }
</style>

具体页面布局的代码，请参考我之前的文章juejin.cn/post/738854…

这里不做过多叙述！能坚持✊看到这里，想必你一定很棒，给你个🍭🍭🍭

在线浏览网址http://www.codingfox.icu/#/dashboard (我不知道可以坚持到多久，靠爱发电，网站搬迁会尽量迁移)