Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 7x 7x 7x 2x 7x 7x 2x 2x 2x 7x 7x 7x 7x 7x 7x 7x 2x 2x 7x | <template>
<div :class="$style.root" :size="size">
<div :class="[
{
[$style.rotate]: iconRotate
}
]">
<i-ico :class="$style.icon" :name="icon"></i-ico>
</div>
<div v-if="text">
<u-text :class="$style.text">{{text}}</u-text>
</div>
</div>
</template>
<script>
export default {
name: 'u-loading',
props: {
icon: {
type: String,
default: 'loading'
},
iconRotate: {
type: Boolean,
default: true,
},
text: {
type: String,
},
size: {
type: String,
validator: (value) => ['small', 'large'].includes(value),
},
},
};
</script>
<style module>
.root {
text-align: center;
display: inline-block;
vertical-align: middle;
}
.root .icon {
width: 24px;
height: 24px;
line-height: 24px;
font-size: 24px;
color: var(--loading-icon-color);
}
.root[size="small"] .icon {
width: 16px;
height: 16px;
line-height: 16px;
font-size: 16px;
}
.root[size="large"] .icon {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 40px;
}
.rotate {
animation: rotate 1.5s linear infinite;
transform-origin: center;
}
@keyframes rotate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}E
.text {
color: var(--loading-text-color);
}
</style>
|