marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

skeleton loader

Browse Source
This commit is contained in:
Marco Crapts
2023-05-20 14:54:41 +02:00
parent 7e7bb41a27
commit f61be632a0
8 changed files with 143 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Skeleton/SkeletonNote.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<div class="flex h-full w-full animate-pulse flex-col">
<div class="mb-2 flex items-center space-x-4 py-1">
<div class="h-[2.25rem] w-[40px] rounded bg-secondary"></div>
<div class="h-[2.25rem] flex-grow rounded bg-secondary"></div>
</div>
<div class="flex flex-grow flex-col gap-2">
<div class="h-[1.25rem] my-1 w-full rounded bg-secondary"></div>
<div class="h-[1.25rem] my-1 w-full rounded bg-secondary"></div>
<div class="h-[1.25rem] my-1 w-5/12 rounded bg-secondary"></div>
<div class="mt-2 h-[2rem] w-full rounded bg-secondary"></div>
<div class="h-[1.25rem] my-1 w-full rounded bg-secondary"></div>
<div class="h-[1.25rem] my-1 w-4/6 rounded bg-secondary"></div>
<div class="ml-8 h-[1.25rem] my-1 w-5/12 rounded bg-secondary"></div>
<div class="ml-8 h-[1.25rem] my-1 w-7/12 rounded bg-secondary"></div>
<div class="ml-8 h-[1.25rem] my-1 w-6/12 rounded bg-secondary"></div>
<div class="h-[1.25rem] my-1 w-full rounded bg-secondary"></div>
</div>
<hr class="my-3" />
<div class="flex gap-2">
<div class="h-[1.25rem] w-2/12 rounded bg-secondary"></div>
<div class="h-[1.25rem] w-4/12 rounded bg-secondary ml-auto"></div>
</div>
</div>
</template>
<style scoped>
.bg-secondary {
@apply bg-secondary/25;
}
</style>