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": {
"@mdi/font": "5.9.55",
"@vuepic/vue-datepicker": "^3.6.4",
"animate.css": "^4.1.1",
"axios": "^1.2.2",
"core-js": "^3.8.3",
"moment": "^2.29.4",

53
src/components/LoadingScreen.vue
View file

@ -1,40 +1,49 @@
<template>
<div :class="{ loader: true, fadeout: !isLoading }">
Loading ...
</div>
<div :class="{ loader: true, fadeout: !isLoading }">
<div class="animate__animated animate__rubberBand animate__infinite animate__slow">
<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>
<script>
import 'animate.css';
export default {
name: "LoadingScreen",
props: ["isLoading"]
name: "LoadingScreen",
props: ["isLoading"]
};
</script>
<style>
.loader {
background-color: lightyellow;
bottom: 0;
color: black;
display: block;
font-size: 16px;
left: 0;
overflow: hidden;
padding-top: 10vh;
position: fixed;
right: 0;
text-align: center;
top: 0;
background-color: lightyellow;
bottom: 0;
color: black;
display: block;
font-size: 16px;
left: 0;
overflow: hidden;
padding-top: 10vh;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
.fadeout {
animation: fadeout 1s forwards;
animation: fadeout 1s forwards;
}
@keyframes fadeout {
to {
opacity: 0;
visibility: hidden;
}
to {
opacity: 0;
visibility: hidden;
}
}
</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"
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:
version "4.1.3"
resolved "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"