lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
91 lines (84 loc) • 6.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@keyframes TinyBarLoader-anime {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.TinyBarLoader {
animation: TinyBarLoader-anime 1s linear infinite;
}
</style>
</head>
<body class="flex h-screen m-0 font-sans bg-white dark:bg-black">
<div class="flex overflow-hidden">
<!-- Light Theme Section -->
<section class="flex h-screen w-screen bg-white dark:bg-black">
<div class="relative w-10 h-10 m-auto">
<div class="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-30deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.0833333333s;"></div>
<div class="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-60deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.1666666667s;"></div>
<div class="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-90deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.25s;"></div>
<div class="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-120deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.3333333333s;"></div>
<div class="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-150deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.4166666667s;"></div>
<div class="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-180deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.5s;"></div>
<div class="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-210deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.5833333333s;"></div>
<div class="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-240deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.6666666667s;"></div>
<div class="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-270deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.75s;"></div>
<div class="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-300deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.8333333333s;"></div>
<div class="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-330deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.9166666667s;"></div>
<div class="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-360deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -1s;"></div>
</div>
</section>
<!-- Dark Theme Section -->
<section class="flex w-full h-screen bg-black dark:bg-white">
<div class="relative w-10 h-10 m-auto">
<div class="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-30deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.0833333333s;"></div>
<div class="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-60deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.1666666667s;"></div>
<div class="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-90deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.25s;"></div>
<div class="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-120deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.3333333333s;"></div>
<div class="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-150deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.4166666667s;"></div>
<div class="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-180deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.5s;"></div>
<div class="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-210deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.5833333333s;"></div>
<div class="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-240deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.6666666667s;"></div>
<div class="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-270deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.75s;"></div>
<div class="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-300deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.8333333333s;"></div>
<div class="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-330deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -0.9166666667s;"></div>
<div class="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-360deg] translate-y-[-18px] TinyBarLoader"
style="animation-delay: -1s;"></div>
</div>
</section>
</div>
</body>
</html>