STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

update loaders

Browse Source
This commit is contained in:
James Collins
2023-02-21 14:09:13 +10:00
parent 3018048140
commit 516410a649
4 changed files with 126 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
resources/js/components/SMLoader.vue
View File

@@ -2,7 +2,8 @@
<template v-if="loading">
<transition name="fade">
<div v-if="loading" class="sm-loader">
<SMLoadingIcon />
<SMLoadingIconToolbox v-if="type.toLowerCase() == 'toolbox'" />
<SMLoadingIconBalls v-else />
</div>
</transition>
</template>
@@ -10,12 +11,19 @@
</template>
<script setup lang="ts">
import SMLoadingIcon from "./SMLoadingIcon.vue";
import SMLoadingIconToolbox from "./SMLoadingIconToolbox.vue";
import SMLoadingIconBalls from "./SMLoadingIconBalls.vue";
defineProps({
loading: {
type: Boolean,
default: false,
required: true,
},
type: {
type: String,
default: "",
required: false,
},
});
</script>

66
resources/js/components/SMLoadingIcon.vue
View File

@@ -1,66 +0,0 @@
<template>
<div class="sm-loading-icon">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</template>
<style lang="scss">
.sm-loading-icon {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.sm-loading-icon div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #000;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.sm-loading-icon div:nth-child(1) {
left: 8px;
animation: sm-loading-icon1 0.6s infinite;
}
.sm-loading-icon div:nth-child(2) {
left: 8px;
animation: sm-loading-icon2 0.6s infinite;
}
.sm-loading-icon div:nth-child(3) {
left: 32px;
animation: sm-loading-icon2 0.6s infinite;
}
.sm-loading-icon div:nth-child(4) {
left: 56px;
animation: sm-loading-icon3 0.6s infinite;
}
@keyframes sm-loading-icon1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes sm-loading-icon3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes sm-loading-icon2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
</style>

67
resources/js/components/SMLoadingIconBalls.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<div class="sm-loading-icon-balls">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</template>
<style lang="scss">
.sm-loading-icon-balls {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #000;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
div:nth-child(1) {
left: 8px;
animation: sm-loading-icon1 0.6s infinite;
}
div:nth-child(2) {
left: 8px;
animation: sm-loading-icon2 0.6s infinite;
}
div:nth-child(3) {
left: 32px;
animation: sm-loading-icon2 0.6s infinite;
}
div:nth-child(4) {
left: 56px;
animation: sm-loading-icon3 0.6s infinite;
}
@keyframes sm-loading-icon1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes sm-loading-icon3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes sm-loading-icon2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
}
</style>

49
resources/js/components/SMLoadingIconToolbox.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<div class="sm-loading-icon-toolbox">
<div class="loading-logo"></div>
<div class="loading-bar"></div>
</div>
</template>
<style lang="scss">
.sm-loading-icon-toolbox {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
.loading-logo {
background-image: url("/img/logo-small.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 130px;
width: 130px;
}
.loading-bar {
width: 130px;
height: 10px;
background: #cfcfcf;
position: relative;
overflow: hidden;
border: 1px solid #aaa;
}
.loading-bar::before {
content: "";
width: 68px;
height: 10px;
background: $primary-color;
position: absolute;
left: -34px;
animation: bluebar 1.5s infinite ease;
}
}
@keyframes bluebar {
50% {
left: 96px;
}
}
</style>