summaryrefslogtreecommitdiff
path: root/src/client/components/global/loading.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/components/global/loading.vue')
-rw-r--r--src/client/components/global/loading.vue32
1 files changed, 16 insertions, 16 deletions
diff --git a/src/client/components/global/loading.vue b/src/client/components/global/loading.vue
index 9b810f0a16..7bde53c12e 100644
--- a/src/client/components/global/loading.vue
+++ b/src/client/components/global/loading.vue
@@ -1,5 +1,5 @@
<template>
-<div class="yxspomdl" :class="{ inline, colored }">
+<div class="yxspomdl" :class="{ inline, colored, mini }">
<div class="ring"></div>
</div>
</template>
@@ -18,7 +18,12 @@ export default defineComponent({
type: Boolean,
required: false,
default: true
- }
+ },
+ mini: {
+ type: Boolean,
+ required: false,
+ default: false
+ },
}
});
</script>
@@ -38,6 +43,8 @@ export default defineComponent({
text-align: center;
cursor: wait;
+ --size: 48px;
+
&.colored {
color: var(--accent);
}
@@ -45,19 +52,12 @@ export default defineComponent({
&.inline {
display: inline;
padding: 0;
+ --size: 32px;
+ }
- > .ring:after {
- width: 32px;
- height: 32px;
- }
-
- > .ring {
- &:before,
- &:after {
- width: 32px;
- height: 32px;
- }
- }
+ &.mini {
+ padding: 16px;
+ --size: 32px;
}
> .ring {
@@ -70,8 +70,8 @@ export default defineComponent({
content: " ";
display: block;
box-sizing: border-box;
- width: 48px;
- height: 48px;
+ width: var(--size);
+ height: var(--size);
border-radius: 50%;
border: solid 4px;
}