Preloader

Basic usage

<div>
    <mu-preloader :show="show" type="something"></mu-preloader>
    <el-button @click="showPreloader">Show preloader</el-button>
</div>
1
2
3
4
export default {
    data() {
        return {
            show: false
        };
    },
    methods: {
        showPreloader() {
            window.setTimeout(() => {
                this.show = !this.show;
            }, 2000);

            this.show = !this.show;
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Blue style

<div>
    <mu-preloader :show="show" type="cashback"></mu-preloader>
    <el-button @click="showPreloader">Show preloader</el-button>
</div>
1
2
3
4
export default {
    data() {
        return {
            show: false
        };
    },
    methods: {
        showPreloader() {
            window.setTimeout(() => {
                this.show = !this.show;
            }, 2000);

            this.show = !this.show;
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Red style

<div>
    <mu-preloader :show="show" type="user"></mu-preloader>
    <el-button @click="showPreloader">Show preloader</el-button>
</div>
1
2
3
4
export default {
    data() {
        return {
            show: false
        };
    },
    methods: {
        showPreloader() {
            window.setTimeout(() => {
                this.show = !this.show;
            }, 2000);

            this.show = !this.show;
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Attributes

Attribute Description Type Accepted Values Default
show show preloader Boolean true / false false
type preloader type String cashback / user / something else mixed