All files / src/components/u-loading.vue index.vue

100% Statements 20/20
50% Branches 4/8
100% Functions 4/4
100% Lines 19/19

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>