studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Add skeleton animations for Menu and Projects

Browse source
This commit is contained in:
Timothée Goguely 2025-05-14 16:29:17 +02:00 • committed by isUnknown
parent 11d41e242d
commit 8755bdc210
3 changed files with 54 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/Menu.vue
View file

@ -398,4 +398,19 @@ button[aria-controls="menu"][aria-expanded="false"]
transform: translateY(-0.1em);
overflow: hidden;
}
/* Skeleton */
#menu details.skeleton::after {
content: '';
display: block;
height: calc(44px * 5);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 332 88' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%23F2F2F2' x='16' y='10' width='240' height='24' rx='8' ry='8'/%3E%3Crect fill='%23F2F2F2' x='16' y='54' width='160' height='24' rx='8' ry='8'/%3E%3C/svg%3E%0A");
background-repeat: repeat-y;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
animation: skeleton 1s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}
@keyframes skeleton {
0% { opacity: .25 }
100% { opacity: .75 }
}
</style>