<!--
*
* loadingGif组件--"数据请求中"
*
* 使用方法：
* <loading-gif :show-loading="showLoaddingGif"></loading-gif>
*
* 通过修改showLoaddingGif的true或者false 来控制loading的显示和隐藏!
*
-->
<template>
<div class='uil-default-css' style='transform:scale(0.3);' v-show="showLoading">
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(0deg) translate(0,-60px);transform:rotate(0deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(30deg) translate(0,-60px);transform:rotate(30deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(60deg) translate(0,-60px);transform:rotate(60deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(90deg) translate(0,-60px);transform:rotate(90deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(120deg) translate(0,-60px);transform:rotate(120deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(150deg) translate(0,-60px);transform:rotate(150deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(180deg) translate(0,-60px);transform:rotate(180deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(210deg) translate(0,-60px);transform:rotate(210deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(240deg) translate(0,-60px);transform:rotate(240deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(270deg) translate(0,-60px);transform:rotate(270deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(300deg) translate(0,-60px);transform:rotate(300deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(330deg) translate(0,-60px);transform:rotate(330deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
</div>
</template> <script>
export default {
props: ["showLoading"]
}
</script> <style lang="sass" rel="stylesheet/scss">
@-webkit-keyframes uil-default-anim {
0% {
opacity: 1
}
100% {
opacity: 0
}
} @keyframes uil-default-anim {
0% {
opacity: 1
}
100% {
opacity: 0
}
} .uil-default-css > div:nth-of-type(1) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(2) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: -0.4166666666666667s;
animation-delay: -0.4166666666666667s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(3) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: -0.33333333333333337s;
animation-delay: -0.33333333333333337s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(4) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: -0.25s;
animation-delay: -0.25s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(5) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: -0.16666666666666669s;
animation-delay: -0.16666666666666669s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(6) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: -0.08333333333333331s;
animation-delay: -0.08333333333333331s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(7) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(8) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: 0.08333333333333337s;
animation-delay: 0.08333333333333337s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(9) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: 0.16666666666666663s;
animation-delay: 0.16666666666666663s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(10) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(11) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: 0.33333333333333337s;
animation-delay: 0.33333333333333337s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(12) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: 0.41666666666666663s;
animation-delay: 0.41666666666666663s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
}
</style>
<!-- * * loadingGif组件--"数据请求中" * * 使用方法： * <loading-gif :show-loading="showLoaddingGif"></loading-gif> * * 通过修改showLoaddingGif的true或者false 来控制loading的显示和隐藏! * --><template> <div class='uil-default-css' style='transform:scale(0.3);' v-show="showLoading"> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(0deg) translate(0,-60px);transform:rotate(0deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(30deg) translate(0,-60px);transform:rotate(30deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(60deg) translate(0,-60px);transform:rotate(60deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(90deg) translate(0,-60px);transform:rotate(90deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(120deg) translate(0,-60px);transform:rotate(120deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(150deg) translate(0,-60px);transform:rotate(150deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(180deg) translate(0,-60px);transform:rotate(180deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(210deg) translate(0,-60px);transform:rotate(210deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(240deg) translate(0,-60px);transform:rotate(240deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(270deg) translate(0,-60px);transform:rotate(270deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(300deg) translate(0,-60px);transform:rotate(300deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(330deg) translate(0,-60px);transform:rotate(330deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> </div></template> <script> export default { props: ["showLoading"] }</script> <style lang="sass" rel="stylesheet/scss"> @-webkit-keyframes uil-default-anim { 0% { opacity: 1 } 100% { opacity: 0 } } @keyframes uil-default-anim { 0% { opacity: 1 } 100% { opacity: 0 } } .uil-default-css > div:nth-of-type(1) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(2) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: -0.4166666666666667s; animation-delay: -0.4166666666666667s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(3) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: -0.33333333333333337s; animation-delay: -0.33333333333333337s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(4) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: -0.25s; animation-delay: -0.25s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(5) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: -0.16666666666666669s; animation-delay: -0.16666666666666669s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(6) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: -0.08333333333333331s; animation-delay: -0.08333333333333331s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(7) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: 0s; animation-delay: 0s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(8) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: 0.08333333333333337s; animation-delay: 0.08333333333333337s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(9) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: 0.16666666666666663s; animation-delay: 0.16666666666666663s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(10) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(11) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: 0.33333333333333337s; animation-delay: 0.33333333333333337s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(12) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: 0.41666666666666663s; animation-delay: 0.41666666666666663s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; }</style>