Search Components

Loaders

Visual elements indicating content is loading

Organic Nature-Inspired Loader Component

A high-contrast, nature-inspired loading component suitable for business and corporate websites, featuring flowing lines and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative flex flex-col items-center justify-center p-8 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl bg-white dark:bg-gray-800 transform transition-all duration-300 hover:scale-[1.01]">
    <!-- Background organic shapes - Desktop/Tablet -->
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-gradient-to-br from-green-300 to-blue-400 dark:from-green-600 dark:to-blue-700 rounded-full mix-blend-multiply opacity-30 blur-xl animate-blob hidden md:block"></div>
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-gradient-to-tl from-purple-300 to-pink-400 dark:from-purple-600 dark:to-pink-700 rounded-full mix-blend-multiply opacity-30 blur-xl animate-blob animation-delay-2000 hidden md:block"></div>
    <div class="absolute top-1/4 -right-1/6 w-1/3 h-1/3 bg-gradient-to-tr from-yellow-300 to-orange-400 dark:from-yellow-600 dark:to-orange-700 rounded-full mix-blend-multiply opacity-20 blur-xl animate-blob animation-delay-4000 hidden md:block"></div>

    <!-- Main content -->
    <div class="relative z-10 flex flex-col items-center space-y-6 md:space-y-8">
      <!-- Loader Animation -->
      <div class="relative w-24 h-24 md:w-32 md:h-32">
        <!-- Outer ring -->
        <div class="absolute inset-0 rounded-full border-4 border-t-4 border-transparent border-t-blue-500 dark:border-t-blue-400 animate-spin-slow" style="border-width: 5px; border-radius: 50%;"></div>
        <!-- Inner flowing path -->
        <div class="absolute inset-0 rounded-full border-4 border-t-4 border-b-4 border-transparent border-t-green-500 border-b-purple-500 dark:border-t-green-400 dark:border-b-purple-400 animate-spin-fast animation-delay-500" style="border-width: 5px; border-radius: 50%;"></div>
        <!-- Central logo/icon placeholder -->
        <div class="absolute inset-4 md:inset-6 flex items-center justify-center bg-gray-50 dark:bg-gray-700 rounded-full shadow-inner">
          <svg class="w-10 h-10 md:w-12 md:h-12 text-gray-700 dark:text-gray-300 transform transition-transform duration-300 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v8"></path>
          </svg>
        </div>
      </div>

      <div class="text-center">
        <p class="text-lg md:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 whitespace-nowrap overflow-hidden">
          Loading Content
        </p>
        <p class="text-sm md:text-base text-gray-600 dark:text-gray-300 max-w-xs md:max-w-md">
          Please wait while we prepare your natural and flowing experience...
        </p>
      </div>

      <!-- Progress Bar (Optional, but adds complexity) -->
      <div class="w-full max-w-xs md:max-w-sm h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
        <div class="h-full bg-gradient-to-r from-blue-500 to-green-500 dark:from-blue-400 dark:to-green-400 rounded-full animate-progress-flow" style="width: 0%;"></div>
      </div>

    </div>
  </div>
</div>

<style>
  /* Tailwind CSS @layer utilities for custom keyframes */
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @keyframes spin-fast {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
  }
  @keyframes progress-flow {
    0% { width: 0%; }
    25% { width: 40%; }
    50% { width: 70%; }
    75% { width: 90%; }
    100% { width: 100%; }
  }
  @keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
  }

  .animate-spin-slow {
    animation: spin-slow 2.5s linear infinite;
  }
  .animate-spin-fast {
    animation: spin-fast 1.5s linear infinite;
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .animate-progress-flow {
    animation: progress-flow 3s ease-out forwards;
  }
  .animate-blob {
    animation: blob 7s ease-in-out infinite;
  }
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
  .animation-delay-500 {
    animation-delay: 0.5s;
  }
</style>

Skeuomorphic Loader Component

A professional, responsive loader component with a skeuomorphic design, complementary color scheme, and dark mode support, suitable for business/corporate websites. Features a subtle, animated loading bar within a metallic-like container.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-500">

  <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-200 mb-8 tracking-tight text-center">
    Loading...
  </h2>

  <!-- Skeuomorphic Loader Container -->
  <div class="relative w-full max-w-sm h-20 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(0,0,0,0.3),5px_5px_15px_rgba(0,0,0,0.2)] dark:shadow-[inset_2px_2px_5px_rgba(255,255,255,0.1),inset_-2px_-2px_8px_rgba(0,0,0,0.9),5px_5px_15px_rgba(0,0,0,0.5)] p-4 border border-solid border-gray-400 dark:border-gray-600 transition-all duration-500 animate-pulse-subtle flex flex-col justify-center items-center">
    
    <!-- Inner Bezel/Recess -->
    <div class="relative w-full h-12 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-[inset_1px_1px_3px_rgba(0,0,0,0.2),inset_-1px_-1px_3px_rgba(255,255,255,0.7)] dark:shadow-[inset_1px_1px_3px_rgba(255,255,255,0.05),inset_-1px_-1px_3px_rgba(0,0,0,0.9)] p-2 transition-all duration-500">
      
      <!-- Loading Bar Track -->
      <div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded-lg overflow-hidden shadow-inner-dark transition-colors duration-500">
        
        <!-- Loading Progress Bar (complementary color - often orange/yellow or green) -->
        <div class="h-full bg-gradient-to-r from-orange-400 to-amber-500 dark:from-orange-500 dark:to-amber-600 rounded-lg animate-loading-bar origin-left shadow-[0_0_8px_rgba(251,146,60,0.8)] dark:shadow-[0_0_10px_rgba(249,115,22,0.6)]" style="width: 75%;">
        </div>
      </div>
    </div>
    
    <p class="absolute -bottom-6 text-sm text-gray-600 dark:text-gray-400 font-medium whitespace-nowrap overflow-hidden">
      Preparing resources...
    </p>

  </div>

  <style>
    @keyframes loading-bar {
      0% { width: 0%; transform: translateX(-100%); opacity: 0.5; }
      25% { width: 50%; transform: translateX(0%); opacity: 0.8; }
      50% { width: 100%; opacity: 1; }
      75% { width: 50%; transform: translateX(50%); opacity: 0.8; }
      100% { width: 0%; transform: translateX(100%); opacity: 0.5; }
    }

    .animate-loading-bar {
      animation: loading-bar 2s ease-in-out infinite alternate;
    }

    @keyframes pulse-subtle {
      0%, 100% { transform: scale(1); filter: brightness(1); }
      50% { transform: scale(1.01); filter: brightness(1.05); }
    }

    .animate-pulse-subtle {
      animation: pulse-subtle 3s ease-in-out infinite;
    }

    /* Custom utility for inner dark shadow to mimic depth */
    .shadow-inner-dark {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    }
    .dark .shadow-inner-dark {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
    }
  </style>

</div>

Glassmorphism Loader Component

A simple, glassmorphism-styled loader component with complementary colors, suitable for a portfolio, with responsive and dark mode support.

Open Preview

                <div class="flex h-screen items-center justify-center bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="relative transform cursor-pointer rounded-2xl bg-white bg-opacity-10 p-8 shadow-2xl backdrop-blur-xl backdrop-filter transition-all duration-300 hover:scale-105 dark:bg-gray-700 dark:bg-opacity-10">
    <div class="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 opacity-20 blur-xl dark:from-gray-700 dark:via-gray-800 dark:to-black"></div>
    <div class="loader-dots relative flex h-24 w-24 transform items-center justify-center space-x-2 rounded-full bg-white bg-opacity-20 shadow-inner dark:bg-gray-800 dark:bg-opacity-20">
      <div class="h-4 w-4 animate-bounce rounded-full bg-blue-600 dark:bg-blue-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-purple-600 delay-75 dark:bg-purple-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-pink-600 delay-150 dark:bg-pink-400"></div>
    </div>
    <p class="mt-4 text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Loading Awesomeness...</p>
  </div>

  <style>
    @keyframes bounce {
      0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }

    .loader-dots div {
      animation: bounce 1s infinite;
    }

    .loader-dots div:nth-child(2) {
      animation-delay: 0.1s;
    }

    .loader-dots div:nth-child(3) {
      animation-delay: 0.2s;
    }
  </style>
</div>

Neumorphic Loaders Component

A Neumorphic Loaders Component with an analogous color scheme, suitable for a blog or content site, featuring a responsive design and dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900">
  <!-- Neumorphic Loader 1 -->
  <div class="relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center">
    <div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-blue-500 dark:border-blue-700 animate-spin"></div>
  </div>

  <!-- Neumorphic Loader 2 -->
  <div class="relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center">
    <div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-green-500 dark:border-green-700 animate-pulse"></div>
  </div>

  <!-- Neumorphic Loader 3 (for larger screens with subtle animation) -->
  <div class="hidden md:flex relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark items-center justify-center">
    <div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-purple-500 dark:border-purple-700 animate-bounce-slow"></div>
  </div>
</div>

<!-- Add a style block for the custom animation, as Tailwind doesn't have a direct "bounce-slow" -->
<style>
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .animate-bounce-slow {
    animation: bounce-slow 2s infinite ease-in-out;
  }

  /* Neumorphism Shadows */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #4a5568;
  }
</style>

Loaders Component

A complex, responsive, Glassmorphism-styled loader component for e-commerce, with a Triadic color scheme and dark mode support, using HTML and Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-8">
  <div class="relative bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-8 w-full max-w-2xl border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-30">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 rounded-xl opacity-20 dark:from-purple-700 dark:via-pink-800 dark:to-red-800"></div>
    <div class="relative z-10 flex flex-col md:flex-row items-center justify-center space-y-8 md:space-y-0 md:space-x-8">
      <!-- Product Image Skeleton -->
      <div class="w-48 h-48 md:w-64 md:h-64 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse shadow-lg flex-shrink-0"></div>
      
      <!-- Product Info Skeletons -->
      <div class="flex-1 space-y-6 w-full">
        <div class="h-8 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-3/4 animate-pulse"></div>
        <div class="h-6 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-1/2 animate-pulse"></div>
        <div class="space-y-4">
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-full animate-pulse"></div>
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-5/6 animate-pulse"></div>
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-3/4 animate-pulse"></div>
        </div>
        <div class="h-12 bg-purple-500 bg-opacity-50 dark:bg-purple-700 dark:bg-opacity-50 rounded-lg w-full animate-bounce"></div>
      </div>
    </div>
    
    <!-- Additional Loader Elements -->
    <div class="relative z-10 mt-8 grid grid-cols-2 md:grid-cols-4 gap-6">
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
    </div>

    <!-- Overlay for interactivity indication -->
    <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10 pointer-events-none rounded-xl">
      <div class="w-24 h-24 border-8 border-t-8 border-purple-400 dark:border-purple-600 border-opacity-70 dark:border-opacity-70 rounded-full animate-spin"></div>
    </div>
  </div>
</div>

Loaders Component

A complex, responsive, retro-vintage loader component for business websites, with vibrant colors and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-64 h-64 border-4 border-purple-500 rounded-full animate-spin-slow">
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="w-24 h-24 bg-pink-500 rounded-full animate-pulse-fast"></div>
    </div>
    <div class="absolute top-0 left-0 w-16 h-16 -mt-8 -ml-8 bg-yellow-400 rounded-full animate-bounce"></div>
    <div class="absolute bottom-0 right-0 w-16 h-16 -mb-8 -mr-8 bg-green-400 rounded-full animate-bounce delay-100"></div>
    <div class="absolute top-0 right-0 w-12 h-12 -mt-6 -mr-6 bg-blue-400 rounded-full animate-spin-reverse"></div>
    <div class="absolute bottom-0 left-0 w-12 h-12 -mb-6 -ml-6 bg-red-400 rounded-full animate-spin-reverse delay-100"></div>
  </div>

  <style>
    @keyframes spin-slow {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse-fast {
      0%, 100% {
        transform: scale(0.9);
        opacity: 0.7;
      }
      50% {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    @keyframes spin-reverse {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(-360deg);
      }
    }

    .animate-spin-slow {
      animation: spin-slow 8s linear infinite;
    }

    .animate-pulse-fast {
      animation: pulse-fast 1.5s infinite;
    }

    .animate-bounce {
      animation: bounce 2s infinite;
    }

    .animate-spin-reverse {
      animation: spin-reverse 5s linear infinite;
    }
  </style>
</div>

Loaders Component

A responsive Material Design loader component with triadic color scheme, suitable for a portfolio, featuring dark theme support and multiple interactive elements.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- Component: Complex Material Design Loader for Portfolio -->
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 space-y-8 animate-fade-in">

    <!-- Header/Title Section -->
    <div class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 capitalize">Portfolio Showcase Loading</h2>
      <div class="flex space-x-2">
        <div class="w-8 h-8 bg-purple-500 dark:bg-purple-600 rounded-full animate-pulse"></div>
        <div class="w-8 h-8 bg-green-500 dark:bg-green-600 rounded-full animate-pulse delay-75"></div>
      </div>
    </div>

    <!-- Project/Item Loading Cards (Grid Layout) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Loading Card 1 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

      <!-- Loading Card 2 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow delay-150">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

      <!-- Loading Card 3 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow delay-300">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

      <!-- Loading Card 4 (for larger screens) -->
      <div class="hidden lg:block bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow delay-[450ms]">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

    </div>

    <!-- Progress Bar Section -->
    <div class="space-y-4">
      <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
        <div class="h-full w-2/3 bg-gradient-to-r from-blue-500 to-green-400 dark:from-blue-600 dark:to-green-500 rounded-full animate-progress-fill"></div>
      </div>
      <p class="text-center text-gray-600 dark:text-gray-400 text-sm">Loading portfolio items... Please wait.</p>
    </div>

    <!-- Call to Action / Interactive Elements (Placeholder) -->
    <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
      <button class="w-full sm:w-auto px-8 py-3 bg-fuchsia-500 dark:bg-fuchsia-600 text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1 animate-bounce-slow">
        <div class="flex items-center justify-center space-x-2">
          <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          <span>Processing Data</span>
        </div>
      </button>
      <button class="w-full sm:w-auto px-8 py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-full shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1">
        <span class="animate-pulse">Fetching Assets</span>
      </button>
    </div>

  </div>

  <!-- Tailwind CSS Customizations (Animations) -->
  <style>
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
      animation: fade-in 0.8s ease-out forwards; 
    }

    @keyframes pulse-slow {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    .animate-pulse-slow {
      animation: pulse-slow 2s infinite ease-in-out;
    }

    @keyframes progress-fill {
      0% { width: 0%; }
      100% { width: 66.66%; } /* Simulating 2/3 progress */
    }
    .animate-progress-fill {
      animation: progress-fill 1.5s ease-out forwards;
    }
    
    @keyframes bounce-slow {
      0%, 100% { transform: translateY(0); }
      25% { transform: translateY(-5px); }
      50% { transform: translateY(0); }
      75% { transform: translateY(-2px); }
      100% { transform: translateY(0); }
    }
    .animate-bounce-slow {
        animation: bounce-slow 4s infinite ease-in-out;
    }

  </style>

</div>

Loaders Component

A simple dark mode loader component with a complementary color scheme.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="relative">
    <div class="h-24 w-24 rounded-full border-t-8 border-b-8 border-purple-500"></div>
    <div class="absolute top-0 left-0 h-24 w-24 rounded-full border-t-8 border-b-8 border-pink-500 animate-spin"></div>
  </div>
</div>

Loaders Component

A Loaders Component designed in a Brutalist style with a focus on interactivity for business/corporate websites, featuring an analogous color scheme and responsive design with dark mode support. The design showcases different loader animations that capture the bold and raw aesthetic of brutalism.

Open Preview

                <div class="min-h-screen flex flex-col items-center justify-center bg-gray-200 dark:bg-gray-800">
    <h1 class="text-4xl font-bold mb-8 text-gray-900 dark:text-white">Loaders</h1>
    <div class="flex justify-around w-full max-w-4xl">
        <!-- Loader 1 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-blue-500 dark:bg-blue-700 w-16 h-16 mb-4 rounded-full animate-bounce"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 1</span>
        </div>

        <!-- Loader 2 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-green-500 dark:bg-green-700 w-16 h-16 mb-4 rounded-full animate-spin"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 2</span>
        </div>

        <!-- Loader 3 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-red-500 dark:bg-red-700 w-16 h-16 mb-4 rounded-full animate-ping"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 3</span>
        </div>
    </div>
</div>

<style>
    .loader::-webkit-animation: loader; /* For Safari */
    .loader-animation {
        animation: loader 1s infinite;
    }

    @keyframes loader {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
    }
</style>

Loaders Component

A Material Design styled Loaders Component with a responsive design for showcasing work or products, featuring a dark theme and using Tailwind CSS.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-6 border border-gray-300 rounded-lg shadow-lg dark:border-gray-700 dark:shadow-gray-800 bg-white dark:bg-gray-800">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-4">Loading Portfolio...</h2>
        <div class="space-y-6">
            <!-- Loader Item 1 -->
            <div class="flex items-center space-x-4 animate-pulse">
                <img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/200/200" alt="Project Thumbnail" />
                <div class="flex-1">
                    <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
                </div>
            </div>
            <!-- Loader Item 2 -->
            <div class="flex items-center space-x-4 animate-pulse">
                <img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/201/200" alt="Project Thumbnail" />
                <div class="flex-1">
                    <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
                </div>
            </div>
            <!-- Loader Item 3 -->
            <div class="flex items-center space-x-4 animate-pulse">
                <img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/202/200" alt="Project Thumbnail" />
                <div class="flex-1">
                    <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
                </div>
            </div>
            <!-- Loader Item 4 -->
            <div class="flex items-center space-x-4 animate-pulse">
                <img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/203/200" alt="Project Thumbnail" />
                <div class="flex-1">
                    <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Search Components

Categories

Loaders