adam.goldsmith/PrinterStatus
2
0
Fork 0
mirror of https://github.com/ad1217/PrinterStatus synced 2024-11-10 18:45:08 -05:00
Code Issues 1 Releases Wiki Activity

Add a loading spinner before the printers list is populated

Browse Source
This commit is contained in:
Adam Goldsmith 2021-05-15 13:12:46 -04:00
parent ca74c210b5
commit 3bf5b6b476
1 changed files with 30 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/App.vue
View File

@ -1,5 +1,8 @@
<template> <template>
<div> <div>
<div class="loading" v-show="Object.keys(printers).length === 0">
<div class="loading-spinner"></div>
</div>
<PrinterCard <PrinterCard
v-for="(status, name) in printers" v-for="(status, name) in printers"
:key="name" :key="name"
@ -54,3 +57,30 @@ export default class App extends Vue {
} }
} }
</script> </script>
<style>
.loading {
display: flex;
align-items: center;
justify-content: center;
height: 90vh;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-spinner {
display: block;
height: 10vh;
width: 10vh;
border: solid 1vh transparent;
border-top-color: #1c87c9;
border-radius: 50%;
animation: 2s linear infinite spinner;
}
</style>