mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-06-18 02:47:09 +02:00
Add various display modes to the Spinner component
This commit is contained in:
parent
536dcb1e95
commit
cca0dbaf99
@ -5,15 +5,46 @@
|
||||
type: String,
|
||||
default: 'inline'
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
default: 'commons.generating_otp'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="isVisible">
|
||||
<div v-if="type == 'inline'" class="has-text-centered mt-6">
|
||||
<div v-if="type == 'fullscreen'" class="spinner-container">
|
||||
<div class="spinner-wrapper">
|
||||
<span id="icnSpinnerFull" class="is-size-1 spinner">
|
||||
<FontAwesomeIcon :icon="['fas', 'spinner']" spin />
|
||||
</span>
|
||||
<span>{{ $t(message) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<FontAwesomeIcon v-else-if="type == 'raw'" :icon="['fas', 'spinner']" spin />
|
||||
<div v-else class="has-text-centered mt-6">
|
||||
<span id="icnSpinner" class="is-size-4">
|
||||
<FontAwesomeIcon :icon="['fas', 'spinner']" spin />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.spinner-container {
|
||||
text-align: center;
|
||||
z-index: 100000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.spinner {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
x
Reference in New Issue
Block a user