CCHub Logo CCHub Tailwind Collection
Komponenten Lader Neumorphismus-Lader

Neumorphismus-Lader

Eine Loader-Komponente im Neumorphism-Stil mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es wird kein JavaScript benötigt. Verwendet subtile Schatten, um einen extrudierten Effekt aus dem Hintergrund zu erzeugen. Dunkler Modus, der mit CSS unterstützt wird.

Vorschau

HTML-Code 

<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-32 h-32 relative">
    <div class="absolute inset-0 bg-gray-300 dark:bg-gray-700 rounded-full neumorphic-shadow dark:neumorphic-shadow-dark animate-ping"></div>
    <div class="absolute inset-0 flex items-center justify-center text-gray-600 dark:text-gray-300">
      Loading...
    </div>
  </div>
</div>

<style>
  .neumorphic-shadow {
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  }
  .dark .neumorphic-shadow-dark {
    box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #555555;
  }
  @keyframes ping {
    0% {
      transform: scale(0.8);
      opacity: 1;
    }
    75%, 100% {
      transform: scale(2);
      opacity: 0;
    }
  }
</style>

Verwandte Komponenten

Lader-Komponente

Eine reaktionsschnelle Ladekomponente mit Unterstützung für den Dunkelmodus.

Offen

Lader-Komponente

Eine Loaders-Komponente, die im brutalistischen Stil mit Schwerpunkt auf Interaktivität für Geschäfts-/Unternehmenswebsites gestaltet wurde, mit einem analogen Farbschema und responsivem Design mit Unterstützung des Dunkelmodus. Das Design zeigt verschiedene Ladeanimationen, die die kühne und rohe Ästhetik des Brutalismus einfangen.

Offen

Graustufen-Lade-Spinner

Eine einfache Loading-Spinner-Komponente mit Graustufenfarben und Mikrointeraktionsfokus.

Offen