2020-07-27 17:53:19 +00:00
|
|
|
<template>
|
2024-02-07 11:18:19 +00:00
|
|
|
<div
|
|
|
|
class="loader-container is-loading"
|
|
|
|
:class="{'is-small': variant === 'small'}"
|
|
|
|
/>
|
2020-07-27 17:53:19 +00:00
|
|
|
</template>
|
|
|
|
|
2022-10-10 19:44:59 +00:00
|
|
|
<script lang="ts">
|
|
|
|
export default {
|
2023-04-01 09:20:28 +00:00
|
|
|
inheritAttrs: true,
|
2022-10-10 19:44:59 +00:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2023-04-02 12:44:13 +00:00
|
|
|
<script lang="ts" setup>
|
|
|
|
const {
|
|
|
|
variant = 'default',
|
|
|
|
} = defineProps<{
|
2023-05-30 18:00:02 +00:00
|
|
|
variant?: 'default' | 'small'
|
2023-04-02 12:44:13 +00:00
|
|
|
}>()
|
|
|
|
</script>
|
|
|
|
|
2022-04-24 16:09:54 +00:00
|
|
|
<style scoped lang="scss">
|
2020-09-05 20:35:52 +00:00
|
|
|
.loader-container {
|
|
|
|
height: 100%;
|
|
|
|
min-height: 200px;
|
|
|
|
width: 100%;
|
|
|
|
min-width: 600px;
|
|
|
|
max-width: 100vw;
|
2022-04-24 16:09:54 +00:00
|
|
|
|
|
|
|
&.is-loading-small {
|
|
|
|
min-height: 50px;
|
|
|
|
min-width: 100px;
|
|
|
|
}
|
2023-04-02 12:44:13 +00:00
|
|
|
|
|
|
|
&.is-small {
|
|
|
|
min-width: 100%;
|
|
|
|
height: 150px;
|
|
|
|
|
|
|
|
&.is-loading::after {
|
|
|
|
width: 3rem;
|
|
|
|
height: 3rem;
|
|
|
|
top: calc(50% - 1.5rem);
|
|
|
|
left: calc(50% - 1.5rem);
|
|
|
|
border-width: 3px;
|
|
|
|
}
|
|
|
|
}
|
2020-09-05 20:35:52 +00:00
|
|
|
}
|
2020-07-27 17:53:19 +00:00
|
|
|
</style>
|