extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-08-17 17:11:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Renamed Loader to Spinner, added theming and localization

Browse Source
This commit is contained in:
Josh
2023-04-24 19:30:23 +12:00
parent 69c688e4ea
commit 0727428716
7 changed files with 142 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
resources/js/components/Loader.vue
View File

@@ -1,77 +0,0 @@
<template>
<div v-if="active" class="loader-wrapper">
<div class="spinner">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
name: 'Loader',
props: {
active: Boolean,
message: String
}
}
</script>
<style scoped>
.loader-wrapper {
text-align: center;
z-index: 10000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(50,50,50,0.68);
}
.loader-wrapper p {
font-size: 1.2em;
font-weight: 300;
margin-top: 5px;
letter-spacing: 1px;
color: rgb(255, 255, 255);
}
.spinner {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.spinner div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid #6916a0;
border-radius: 50%;
animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #6916a0 transparent transparent transparent;
}
.spinner div:nth-child(1) {
animation-delay: -0.45s;
}
.spinner div:nth-child(2) {
animation-delay: -0.3s;
}
.spinner div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

4
resources/js/components/OtpDisplayer.vue
View File

@@ -173,10 +173,10 @@
this.clearOTP()
}
finally {
this.$root.hideLoader();
this.$root.hideSpinner();
}
} else {
this.$root.hideLoader();
this.$root.hideSpinner();
}
},

96
resources/js/components/Spinner.vue Normal file
View File

@@ -0,0 +1,96 @@
<template>
<div v-if="active" class="spinner-container">
<div class="spinner-wrapper">
<div class="spinner">
<div class="rect-1"></div>
<div class="rect-2"></div>
<div class="rect-3"></div>
<div class="rect-4"></div>
<div class="rect-5"></div>
</div>
<span>{{ message }}</span>
</div>
</div>
</template>
<script>
export default {
name: 'Spinner',
props: {
active: {
type: Boolean,
default: false
},
message: String,
}
}
</script>
<style scoped>
.spinner-container {
text-align: center;
z-index: 10000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.spinner-wrapper p {
font-size: 1.2em;
font-weight: 300;
margin-top: 5px;
letter-spacing: 1px;
}
.spinner {
margin: auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
}
.spinner > div {
height: 100%;
width: 6px;
display: inline-block;
--webkit-animation: stretch-delay 1.2s infinite ease-in-out;
animation: stretch-delay 1.2s infinite ease-in-out;
}
.spinner .rect-2 {
--webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect-3 {
--webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect-4 {
--webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect-5 {
--webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretch-delay {
0%, 40%, 100% {
--webkit-transform: scaleY(0.4)
}
20% {
--webkit-transform: scaleY(1.0)
}
}
@keyframes stretch-delay {
0%, 40%, 100% {
transform: scaleY(0.4);
--webkit-transform: scaleY(0.4)
}
20% {
transform: scaleY(1.0);
--webkit-transform: scaleY(1.0)
}
}
</style>