psw/cmc_fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

added animated logo for starting up

Browse source
This commit is contained in:
Paul Wilde 2023-02-14 15:50:44 +00:00
parent 351e4e3e14
commit 6f82189a42
3 changed files with 37 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@mdi/font": "5.9.55", "@mdi/font": "5.9.55",
"@vuepic/vue-datepicker": "^3.6.4", "@vuepic/vue-datepicker": "^3.6.4",
"animate.css": "^4.1.1",
"axios": "^1.2.2", "axios": "^1.2.2",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"moment": "^2.29.4", "moment": "^2.29.4",

53
src/components/LoadingScreen.vue
View file

@ -1,40 +1,49 @@
<template> <template>
<div :class="{ loader: true, fadeout: !isLoading }"> <div :class="{ loader: true, fadeout: !isLoading }">
Loading ... <div class="animate__animated animate__rubberBand animate__infinite animate__slow">
</div> <v-img style="border-radius:5%" height="128" src="/images/cmc-logo.png" /><br/>
</div>
<br/>
<v-progress-circular
color="deep-orange"
indeterminate
></v-progress-circular>
Starting ...
</div>
</template> </template>
<script> <script>
import 'animate.css';
export default { export default {
name: "LoadingScreen", name: "LoadingScreen",
props: ["isLoading"] props: ["isLoading"]
}; };
</script> </script>
<style> <style>
.loader { .loader {
background-color: lightyellow; background-color: lightyellow;
bottom: 0; bottom: 0;
color: black; color: black;
display: block; display: block;
font-size: 16px; font-size: 16px;
left: 0; left: 0;
overflow: hidden; overflow: hidden;
padding-top: 10vh; padding-top: 10vh;
position: fixed; position: fixed;
right: 0; right: 0;
text-align: center; text-align: center;
top: 0; top: 0;
} }
.fadeout { .fadeout {
animation: fadeout 1s forwards; animation: fadeout 1s forwards;
} }
@keyframes fadeout { @keyframes fadeout {
to { to {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }
} }
</style> </style>

5
yarn.lock
View file

@ -1925,6 +1925,11 @@ ajv@^8.0.0, ajv@^8.0.1, ajv@^8.8.0:
require-from-string "^2.0.2" require-from-string "^2.0.2"
uri-js "^4.2.2" uri-js "^4.2.2"
animate.css@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
ansi-colors@^4.1.1: ansi-colors@^4.1.1:
version "4.1.3" version "4.1.3"
resolved "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b" resolved "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"