mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
150 lines
3.5 KiB
HTML
150 lines
3.5 KiB
HTML
<div class="bannerContainer">
|
|
|
|
<div class="banner">
|
|
|
|
<div class="loader loader1"></div>
|
|
<div class="loader loader2"></div>
|
|
<div class="loader loader3"></div>
|
|
|
|
|
|
|
|
<div class="loader mainCard">
|
|
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
|
|
<path fill="#393E41" d="M192 64C86 64 0 150 0 256S86 448 192 448H448c106 0 192-86 192-192s-86-192-192-192H192zM496 248c-22.1 0-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40s-17.9 40-40 40zm-24 56c0 22.1-17.9 40-40 40s-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24v32h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H216v32c0 13.3-10.7 24-24 24s-24-10.7-24-24V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h32V200z"></path>
|
|
</svg>
|
|
<span>Well done</span>
|
|
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
|
|
<path fill="#393E41" d="M192 64C86 64 0 150 0 256S86 448 192 448H448c106 0 192-86 192-192s-86-192-192-192H192zM496 248c-22.1 0-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40s-17.9 40-40 40zm-24 56c0 22.1-17.9 40-40 40s-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24v32h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H216v32c0 13.3-10.7 24-24 24s-24-10.7-24-24V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h32V200z"></path>
|
|
</svg>
|
|
|
|
|
|
<div class="loader secondCard">
|
|
|
|
<span>Next Level</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Santaval - Tags: notification */
|
|
/*Container*/
|
|
|
|
.bannerContainer {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/*Banner */
|
|
|
|
.bannerContainer .banner {
|
|
background-color: #e7e5df;
|
|
height: 70px;
|
|
width: 250px;
|
|
border-radius: 10px;
|
|
position: relative;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
/*Loaders */
|
|
|
|
.bannerContainer .banner .loader {
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 10px;
|
|
position: absolute;
|
|
}
|
|
|
|
.bannerContainer .banner .loader1 {
|
|
background-color: #393e41;
|
|
animation: loader 0.5s linear 0s;
|
|
}
|
|
|
|
.bannerContainer .banner .loader2 {
|
|
background-color: #44bba4;
|
|
animation: loader 0.5s linear 0.2s;
|
|
}
|
|
|
|
.bannerContainer .banner .loader3 {
|
|
background-color: #e7bb41;
|
|
animation: loader 0.5s linear 0.3s;
|
|
}
|
|
|
|
/*Main card*/
|
|
|
|
.bannerContainer .banner .mainCard {
|
|
width: 100%;
|
|
background-color: #e7e5df;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
color: #393e41;
|
|
font-weight: bolder;
|
|
animation: loader 0.5s linear 0.4s;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.bannerContainer .banner span {
|
|
font-size: 29px;
|
|
font-weight: 900;
|
|
transform: translateY(-120px);
|
|
animation: appear 0.1s ease-in 0.9s forwards;
|
|
}
|
|
|
|
.bannerContainer .banner svg {
|
|
width: 30px;
|
|
transform: translateY(-100px);
|
|
animation: appear 0.1s ease-in 0.9s forwards;
|
|
}
|
|
|
|
.bannerContainer .banner .mainCard:hover > .secondCard {
|
|
height: 100%;
|
|
color: #e7e5df;
|
|
}
|
|
|
|
/* Second card */
|
|
|
|
.bannerContainer .banner .secondCard {
|
|
background-color: #393e41;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
color: transparent;
|
|
height: 0px;
|
|
transition: all 0.3s ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Animations */
|
|
|
|
@keyframes loader {
|
|
from {
|
|
width: 0%;
|
|
}
|
|
|
|
to {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@keyframes appear {
|
|
from {
|
|
transform: translateY(-100px);
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
|
|
</style>
|