mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
42 lines
816 B
HTML
42 lines
816 B
HTML
<div class="card">
|
|
<div class="card__skeleton card__title"></div>
|
|
<div class="card__skeleton card__description"> </div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by vk-uiux - Tags: animation, loading, card, loader, placeholder, animated, css, css effect, skeleton loading */
|
|
.card {
|
|
width: 18rem;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
border-radius: .8rem;
|
|
background-color: white;
|
|
}
|
|
|
|
.card__skeleton {
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
#ccc 0px,
|
|
rgb(229 229 229 / 90%) 40px,
|
|
#ccc 80px
|
|
);
|
|
background-size: 300%;
|
|
background-position: 100% 0;
|
|
border-radius: inherit;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
.card__title {
|
|
height: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.card__description {
|
|
height: 100px;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
to {
|
|
background-position: -100% 0;
|
|
}
|
|
}
|
|
</style>
|