galaxy/loaders/Tsiangana_new-owl-29.html

87 lines
1.3 KiB
HTML

<div class="loader">
<span class="ani">L</span>
<span class="ani">o</span>
<span class="ani">a</span>
<span class="ani">d</span>
<span class="ani">i</span>
<span class="ani">n</span>
<span class="ani">g</span>
</div>
<style>
/* From Uiverse.io by Tsiangana - Tags: simple, animation, loading, loader, text animation */
.loader {
font-family: Roboto, sans-serif;
font-size: 25px;
font-weight: 600;
}
.ani:nth-child(1) {
animation: ani1 2.1s ease-in-out 14s infinite;
}
@keyframes ani1 {
50% {
font-size: 40px;
}
}
.ani:nth-child(2) {
animation: ani2 2.1s ease-in-out 12s infinite;
}
@keyframes ani2 {
50% {
font-size: 40px;
}
}
.ani:nth-child(3) {
animation: ani3 2.1s ease-in-out 10s infinite;
}
@keyframes ani3 {
50% {
font-size: 40px;
}
}
.ani:nth-child(4) {
animation: ani4 2.1s ease-in-out 8s infinite;
}
@keyframes ani4 {
50% {
font-size: 40px;
}
}
.ani:nth-child(5) {
animation: ani5 2.1s ease-in-out 6s infinite;
}
@keyframes ani5 {
50% {
font-size: 40px;
}
}
.ani:nth-child(6) {
animation: ani6 2.1s ease-in-out 4s infinite;
}
@keyframes ani6 {
50% {
font-size: 40px;
}
}
.ani:nth-child(7) {
animation: ani7 2.1s ease-in-out 2s infinite;
}
@keyframes ani7 {
50% {
font-size: 40px;
}
}
</style>