mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
42 lines
789 B
HTML
42 lines
789 B
HTML
<div class="loader">
|
|
<span class="loader-text">Loading...</span>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by akshat-patel28 - Tags: animation, loader, text animation, animated, typewriter */
|
|
.loader {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-right: 3px solid;
|
|
width: 0px;
|
|
animation: typewriter 2s steps(10) infinite alternate , blink 0.5s steps(10) infinite;
|
|
}
|
|
|
|
.loader-text {
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
background: linear-gradient(to right,#159957, #155799);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
@keyframes typewriter {
|
|
0% {
|
|
width: 0px;
|
|
}
|
|
|
|
100% {
|
|
width: 240px;
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
border-right-color: rgba(255,255,255,.75);
|
|
;
|
|
}
|
|
|
|
100% {
|
|
border-right-color: transparent;
|
|
}
|
|
}
|
|
</style>
|