vue loading组件
<!-- * * 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>
