-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathloading.vue
24 lines (23 loc) · 5.37 KB
/
loading.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
<div class="hh_mask"></div>
<div class="hh_loading_layer">
<div class="hh_loading">
<div class="hh_loading_leaf hh_loading_leaf_0"></div>
<div class="hh_loading_leaf hh_loading_leaf_1"></div>
<div class="hh_loading_leaf hh_loading_leaf_2"></div>
<div class="hh_loading_leaf hh_loading_leaf_3"></div>
<div class="hh_loading_leaf hh_loading_leaf_4"></div>
<div class="hh_loading_leaf hh_loading_leaf_5"></div>
<div class="hh_loading_leaf hh_loading_leaf_6"></div>
<div class="hh_loading_leaf hh_loading_leaf_7"></div>
<div class="hh_loading_leaf hh_loading_leaf_8"></div>
<div class="hh_loading_leaf hh_loading_leaf_9"></div>
<div class="hh_loading_leaf hh_loading_leaf_10"></div>
<div class="hh_loading_leaf hh_loading_leaf_11"></div>
</div>
<p class="hh_loading_content">数据加载中</p>
</div>
</template>
<style>
.hh_mask{position:fixed;z-index:1000;width:100%;height:100%;top:0;left:0}.hh_loading{position:absolute;width:0;z-index:1;left:50%;top:38%}.hh_loading_layer{position:fixed;z-index:50000;width:7.6em;min-height:7.6em;top:180px;left:50%;margin-left:-3.8em;background:rgba(40,40,40,.75);text-align:center;border-radius:5px;color:#fff}.hh_loading_leaf:before{content:" ";position:absolute;width:8.14px;height:3.08px;background:#d1d1d5;box-shadow:0 0 1px rgba(0,0,0,.0980392);border-radius:1px;-webkit-transform-origin:left 50% 0;transform-origin:left 50% 0}.hh_loading_leaf{position:absolute;top:-1px}.hh_loading_leaf_0{-webkit-animation:a 1.25s linear infinite;animation:a 1.25s linear infinite}.hh_loading_leaf_1{-webkit-animation:b 1.25s linear infinite;animation:b 1.25s linear infinite}.hh_loading_leaf_2{-webkit-animation:c 1.25s linear infinite;animation:c 1.25s linear infinite}.hh_loading_leaf_3{-webkit-animation:d 1.25s linear infinite;animation:d 1.25s linear infinite}.hh_loading_leaf_4{-webkit-animation:e 1.25s linear infinite;animation:e 1.25s linear infinite}.hh_loading_leaf_5{-webkit-animation:f 1.25s linear infinite;animation:f 1.25s linear infinite}.hh_loading_leaf_6{-webkit-animation:g 1.25s linear infinite;animation:g 1.25s linear infinite}.hh_loading_leaf_7{-webkit-animation:h 1.25s linear infinite;animation:h 1.25s linear infinite}.hh_loading_leaf_8{-webkit-animation:i 1.25s linear infinite;animation:i 1.25s linear infinite}.hh_loading_leaf_9{-webkit-animation:j 1.25s linear infinite;animation:j 1.25s linear infinite}.hh_loading_leaf_10{-webkit-animation:k 1.25s linear infinite;animation:k 1.25s linear infinite}.hh_loading_leaf_11{-webkit-animation:f 1.25s linear infinite;animation:f 1.25s linear infinite}@keyframes a{0%{opacity:.25}0.01%{opacity:.25}0.02%{opacity:1}60.01%{opacity:.25}100%{opacity:.25}}@keyframes b{0%{opacity:.25}8.34333%{opacity:.25}8.35333%{opacity:1}68.3433%{opacity:.25}100%{opacity:.25}}@keyframes c{0%{opacity:.25}16.6767%{opacity:.25}16.6867%{opacity:1}76.6767%{opacity:.25}100%{opacity:.25}}@keyframes d{0%{opacity:.25}25.01%{opacity:.25}25.02%{opacity:1}85.01%{opacity:.25}100%{opacity:.25}}@keyframes e{0%{opacity:.25}33.3433%{opacity:.25}33.3533%{opacity:1}93.3433%{opacity:.25}100%{opacity:.25}}@keyframes f{0%{opacity:.270958333333333}41.6767%{opacity:.25}41.6867%{opacity:1}1.67667%{opacity:.25}100%{opacity:.270958333333333}}@keyframes g{0%{opacity:.375125}50.01%{opacity:.25}50.02%{opacity:1}10.01%{opacity:.25}100%{opacity:.375125}}@keyframes h{0%{opacity:.479291666666667}58.3433%{opacity:.25}58.3533%{opacity:1}18.3433%{opacity:.25}100%{opacity:.479291666666667}}@keyframes i{0%{opacity:.583458333333333}66.6767%{opacity:.25}66.6867%{opacity:1}26.6767%{opacity:.25}100%{opacity:.583458333333333}}@keyframes j{0%{opacity:.687625}75.01%{opacity:.25}75.02%{opacity:1}35.01%{opacity:.25}100%{opacity:.687625}}@keyframes k{0%{opacity:.791791666666667}83.3433%{opacity:.25}83.3533%{opacity:1}43.3433%{opacity:.25}100%{opacity:.791791666666667}}@keyframes l{0%{opacity:.895958333333333}91.6767%{opacity:.25}91.6867%{opacity:1}51.6767%{opacity:.25}100%{opacity:.895958333333333}}.hh_loading_leaf_0:before{-webkit-transform:rotate(30deg) translate(7.92px);transform:rotate(30deg) translate(7.92px)}.hh_loading_leaf_1:before{-webkit-transform:rotate(30deg) translate(7.92px);transform:rotate(60deg) translate(7.92px)}.hh_loading_leaf_2:before{-webkit-transform:rotate(30deg) translate(7.92px);transform:rotate(90deg) translate(7.92px)}.hh_loading_leaf_3:before{-webkit-transform:rotate(30deg) translate(7.92px);transform:rotate(120deg) translate(7.92px)}.hh_loading_leaf_4:before{-webkit-transform:rotate(30deg) translate(7.92px);transform:rotate(150deg) translate(7.92px)}.hh_loading_leaf_5:before{-webkit-transform:rotate(30deg) translate(7.92px);transform:rotate(180deg) translate(7.92px)}.hh_loading_leaf_6:before{-webkit-transform:rotate(30deg) translate(7.92px);transform:rotate(210deg) translate(7.92px)}.hh_loading_leaf_7:before{-webkit-transform:rotate(30deg) translate(7.92px);transform:rotate(240deg) translate(7.92px)}.hh_loading_leaf_8:before{-webkit-transform:rotate(30deg) translate(7.92px);transform:rotate(270deg) translate(7.92px)}.hh_loading_leaf_9:before{-webkit-transform:rotate(30deg) translate(7.92px);transform:rotate(300deg) translate(7.92px)}.hh_loading_leaf_10:before{-webkit-transform:rotate(30deg) translate(7.92px);transform:rotate(330deg) translate(7.92px)}.hh_loading_leaf_11:before{-webkit-transform:rotate(30deg) translate(7.92px);transform:rotate(360deg) translate(7.92px)}.hh_loading_content{color: #c5c5c5;margin-top:64%;font-size:14px}
</style>