vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Cosmetics on Deferred Demo loader

pull/5098/head
Cagatay Civici 2024-01-12 14:24:12 +03:00
parent 4c97a6df8c
commit 9fa11c7b60
1 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/demo/DeferredDemo.vue
View File

@ -1,5 +1,9 @@
<template> <template>
<div v-if="!visible" class="demo-section-loading">Loading...</div> <div v-if="!visible">
<div class="card">
<div class="deferred-demo-loading"></div>
</div>
</div>
<slot v-else></slot> <slot v-else></slot>
</template> </template>
@ -42,14 +46,35 @@ export default {
}; };
</script> </script>
<style> <style>
.demo-section-loading { .deferred-demo-loading {
display: grid;
place-items: center;
padding: 2rem;
border-radius: 10px; border-radius: 10px;
margin-bottom: 1rem;
font-size: 2rem;
height: 350px; height: 350px;
background: var(--maskbg); position: relative;
overflow: hidden;
}
.deferred-demo-loading::after {
content: '';
animation: deferred-demo-loading 1.2s infinite;
left: 0;
position: absolute;
right: 0;
top: 0;
height: 100%;
transform: translateX(-100%);
z-index: 1;
border-radius: 10px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface-100), rgba(255, 255, 255, 0));
}
@keyframes deferred-demo-loading {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
} }
</style> </style>