openblogvue笔记（七）： loading加载条组件
加载条
思路
设置一个div，3个边框设置同一个颜色。最后一个边框设置另外一种颜色，然后用css动画旋转角度就完成一个简单的loading条了
自定义参数
show：用来控制load条的显示隐藏
新建loading.vue文件
html
<template>
<Transition name="fade">
<div class="loading" v-show="show">
<div class="loading-box">
<div class="loading-style">
<div class="olms-items"></div>
</div>
</div>
</div>
</Transition>
</template>
<script>
export default {
name: 'Loading',
props: {
show: {
type: Boolean,
default: false
}
},
}
</script>
<style scoped>
.loading{
width: 100%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: #333333;
background: #f4f4f4;
}
.loading-box{
width: 100%;
}
.loading-style{
text-align: center;
}
.loading-text{
color: #999999;
}
.olms-items{
margin: 0 auto;
height: 30px;
width: 30px;
border: 3px #ccc solid;
border-bottom: 3px #1890ff solid;
border-radius: 50%;
animation: load 1s linear infinite;
}
@keyframes load {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s inline;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style><template>
<Transition name="fade">
<div class="loading" v-show="show">
<div class="loading-box">
<div class="loading-style">
<div class="olms-items"></div>
</div>
</div>
</div>
</Transition>
</template>
<script>
export default {
name: 'Loading',
props: {
show: {
type: Boolean,
default: false
}
},
}
</script>
<style scoped>
.loading{
width: 100%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: #333333;
background: #f4f4f4;
}
.loading-box{
width: 100%;
}
.loading-style{
text-align: center;
}
.loading-text{
color: #999999;
}
.olms-items{
margin: 0 auto;
height: 30px;
width: 30px;
border: 3px #ccc solid;
border-bottom: 3px #1890ff solid;
border-radius: 50%;
animation: load 1s linear infinite;
}
@keyframes load {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s inline;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>调用
html
<loading :show="true"></loading><loading :show="true"></loading>运行结果
扩展内容：
把loading的节点设置绝对定位，width和height设置成100%，设置层级99，loading条本身有用transition标签做过渡隐藏的动画效果，稍加修改做一个撑满整个页面加载状态框也很合适
然后再根据自己的业务需求，自定义一下具体样式，基本就成型了
本文到此结束。
反馈信息
INFO