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> |