lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
118 lines (114 loc) • 6.52 kB
JSX
import React from 'react';
const TinyBarLoader = () => {
return (
<>
{/* Light Mode Section */}
<section className="flex h-screen w-full bg-white dark:bg-gray-900">
<div className="relative w-10 h-10 m-auto">
<div
className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-30deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.0833333333s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-60deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.1666666667s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-90deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.25s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-120deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.3333333333s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-150deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.4166666667s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-180deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.5s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-210deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.5833333333s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-240deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.6666666667s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-270deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.75s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-300deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.8333333333s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-330deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.9166666667s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-360deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-1s' }}
></div>
</div>
</section>
{/* Dark Mode Section */}
<section className="flex w-full h-screen bg-black dark:bg-gray-900">
<div className="relative w-10 h-10 m-auto">
<div
className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-30deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.0833333333s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-60deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.1666666667s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-90deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.25s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-120deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.3333333333s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-150deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.4166666667s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-180deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.5s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-210deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.5833333333s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-240deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.6666666667s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-270deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.75s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-300deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.8333333333s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-330deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-0.9166666667s' }}
></div>
<div
className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-360deg] translate-y-[-18px] TinyBarLoader"
style={{ animationDelay: '-1s' }}
></div>
</div>
</section>
</>
);
};
export default TinyBarLoader;