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

2
src/assets/css/src/1.0.global.css
View file

@ -163,7 +163,7 @@ summary::after {
content: "";
display: inline-block;
width: 3rem;
height: 3rem;
height: 2.5rem;
background-color: var(--color-background);
background-image: var(--icon-summary);
background-repeat: no-repeat;

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>

39
src/components/Projects.vue
View file

@ -10,7 +10,7 @@
tabindex="0"
:aria-label="tabs[0].label"
class="flow"
:class="{ loading: isProjectsLoading }"
:class="{ skeleton: isProjectsLoading }"
>
<Project
v-for="project in currentProjects"
@ -92,4 +92,41 @@ section.loading::after {
section.loading::after {
content: 'Chargement des projets…';
}
/* Skeleton */
section.skeleton::before,
section.skeleton::after {
content: '';
display: block;
width: 100%;
height: 100%;
max-width: 100%;
margin: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' x='0' y='0' width='100%25' height='244' rx='20' ry='20' /%3E%3Crect fill='%23F2F2F2' x='32' y='34' width='72' height='72' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='40' width='240' height='26' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='80' width='160' height='18' rx='4' ry='4' /%3E%3C/svg%3E%0A");
background-repeat: repeat-y;
background-size: 1080px 260px;
background-position-x: left;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
animation: skeleton 1s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}
section.skeleton::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='tr'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='20' fill='black'/%3E%3C/mask%3E%3Cmask id='br'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='224' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect fill='%23F2F2F2' x='1060' y='0' width='20' height='20' mask='url(%23tr)' /%3E%3Crect fill='%23F2F2F2' x='1060' y='224' width='20' height='20' mask='url(%23br)' /%3E%3C/svg%3E");
background-size: 1080px 260px;
background-position-x: right;
animation: none;
mask-image: none;
}
@media (min-width: 1530px) {
section.skeleton::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1468 156' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' x='0' y='0' width='100%25' height='140' rx='20' ry='20' /%3E%3Crect fill='%23F2F2F2' x='32' y='34' width='72' height='72' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='40' width='240' height='26' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='80' width='160' height='18' rx='4' ry='4' /%3E%3C/svg%3E%0A");
background-size: 1468px 156px;
}
section.skeleton::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1468 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='tr'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1448' cy='20' fill='black'/%3E%3C/mask%3E%3Cmask id='br'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1448' cy='120' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect fill='%23F2F2F2' x='1448' y='0' width='20' height='20' mask='url(%23tr)' /%3E%3Crect fill='%23F2F2F2' x='1448' y='120' width='20' height='20' mask='url(%23br)' /%3E%3C/svg%3E");
background-size: 1468px 156px;
}
}
@keyframes skeleton {
0% { opacity: .50 }
100% { opacity: 1.0 }
}
</style>