88 lines
1.7 KiB
Vue
88 lines
1.7 KiB
Vue
<template>
|
|
<div class="loader"
|
|
v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
|
|
v-bind:class="[this.loaderColor, this.loaderPosition]"
|
|
></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "loader",
|
|
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem */
|
|
props: {
|
|
sizeInRem: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
/* Color options: red, green, blue, white, black */
|
|
loaderColor: {
|
|
type: String
|
|
},
|
|
/* Position options: center, right, left (OPTIONAL) */
|
|
loaderPosition: {
|
|
type: String
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.loader {
|
|
display: flex;
|
|
//Open an overlay to prevent page interaction
|
|
&:before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: transparent;
|
|
z-index: 9999;
|
|
cursor: default;
|
|
}
|
|
//Spinner basics
|
|
&:after {
|
|
content: '';
|
|
mask: url(../../assets/img/icons/spinner.svg);
|
|
mask-size: cover;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
animation: rotation 1s infinite linear;
|
|
@keyframes rotation {
|
|
100% {
|
|
transform:rotate(360deg);
|
|
}
|
|
}
|
|
}
|
|
//Spinner position
|
|
&.center {
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
}
|
|
&.right {
|
|
margin: 0 0 0 auto;
|
|
}
|
|
&.left {
|
|
margin: 0 auto 0 0;
|
|
}
|
|
//Spinner color
|
|
&:after { //Default spinner color (blue) if no other color is specified from the options below
|
|
background-color: $blue;
|
|
}
|
|
&.red:after {
|
|
background-color: $red;
|
|
}
|
|
&.green:after {
|
|
background-color: $green;
|
|
}
|
|
&.white:after {
|
|
background-color: $white;
|
|
}
|
|
&.black:after {
|
|
background-color: $black;
|
|
}
|
|
}
|
|
</style>
|