mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 21:20:21 +08:00
145 lines
No EOL
2.5 KiB
HTML
145 lines
No EOL
2.5 KiB
HTML
<div class="card">
|
|
<span class="card_title">Loading users</span>
|
|
<div class="loader"></div>
|
|
<div class="card_content">
|
|
<button class="load-more" name="load-more" type="button">Load more</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by zanina-yassine - Tags: blue, minimalist, loading, card, loader, gradients, multicolor, loading animation */
|
|
.card {
|
|
width: 400px;
|
|
max-width: 450px;
|
|
height: fit-content;
|
|
|
|
display: grid;
|
|
grid-template-rows: auto 4px auto;
|
|
|
|
padding-bottom: 20px;
|
|
|
|
border-radius: 11px;
|
|
|
|
background: #ffffff;
|
|
box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01),
|
|
0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09),
|
|
0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card_title {
|
|
display: block;
|
|
|
|
padding: 12px 15px;
|
|
|
|
color: rgb(70, 70, 76);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
|
|
.loader {
|
|
height: 3px;
|
|
width: 100%;
|
|
|
|
position: relative;
|
|
|
|
background-color: #e2e4e8;
|
|
animation: retract 5s cubic-bezier(0.15, 0.83, 0.66, 1) 2s forwards infinite;
|
|
}
|
|
|
|
.card:has(.load-more:hover) .loader {
|
|
height: 2px;
|
|
}
|
|
|
|
.loader::before {
|
|
content: "";
|
|
|
|
height: 100%;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
background: linear-gradient(#4480ff 0%, #115dfc 50%, #0550ed 100%);
|
|
animation: slide 5s cubic-bezier(0.15, 0.83, 0.66, 1) 2s forwards infinite;
|
|
}
|
|
|
|
.card_content {
|
|
width: 100%;
|
|
height: 150px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.load-more {
|
|
width: fit-content;
|
|
height: 36px;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
|
|
padding: 0 15px;
|
|
|
|
border-radius: 5px;
|
|
border: 0;
|
|
|
|
background: linear-gradient(180deg, #4480ff 0%, #115dfc 50%, #0550ed 100%);
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
color: #ffffff;
|
|
|
|
box-shadow: 0px 0.5px 0.5px #efefef, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
|
|
transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.load-more:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 10px 20px 0#054eed6b;
|
|
}
|
|
|
|
@keyframes slide {
|
|
0% {
|
|
width: 0%;
|
|
}
|
|
30% {
|
|
width: 20%;
|
|
}
|
|
50% {
|
|
width: 30%;
|
|
}
|
|
70% {
|
|
width: 80%;
|
|
}
|
|
90% {
|
|
width: 100%;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes retract {
|
|
0% {
|
|
height: 3px;
|
|
}
|
|
95% {
|
|
height: 3px;
|
|
}
|
|
100% {
|
|
height: 1px;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|