Korbs/Zarro
Korbs/Zarro
Archived
1
Fork 0
Code Issues Pull requests Activity

Add skeleton for Web Links

Browse source
This commit is contained in:
Korbs 2024-10-23 13:58:55 -04:00
parent d0d93e5587
commit d2072b47f2
1 changed files with 54 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
source/src/components/search/WebLinkSkeleton.astro Normal file
View file

@ -0,0 +1,54 @@
---
// Properties
const {
Title,
Description,
Link
} = Astro.props
---
<div class="fade-up">
<div class="search-result-web-skeleton"></div>
<div class="search-result-web-skeleton"></div>
<div class="search-result-web-skeleton"></div>
<div class="search-result-web-skeleton"></div>
<div class="search-result-web-skeleton"></div>
<div class="search-result-web-skeleton"></div>
<div class="search-result-web-skeleton"></div>
<div class="search-result-web-skeleton"></div>
</div>
<style lang="scss">
@keyframes wave-lines {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
@keyframes wave-squares {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.fade-up {
mask-image: linear-gradient(white, transparent);
}
.search-result-web-skeleton {
display: flex;
flex-direction: column;
gap: 6px;
background: white;
margin-bottom: 12px;
border-radius: 6px;
padding: 64px 12px;
box-shadow: 0px 4px 10px 0px #0000000a;
background: linear-gradient(to right,rgba(164, 164, 164, 0.2) 8%,rgba(241, 238, 238, 0.3) 18%,rgba(155, 155, 155, 0.2) 33%);
background-size: 1500px 1px;
animation: wave-lines 0.8s infinite ease-out;
}
</style>