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

Organic_Nature_Inspired_Food_Loader

Eine Ladekomponente mittlerer Komplexität für Lebensmittel-/Restaurant-Websites mit einem organischen, von der Natur inspirierten Design mit gedämpften Farben und voller Reaktionsfähigkeit, einschließlich Unterstützung des Dunkelmodus.

Offen

Lader-Komponente

Eine einfache Loader-Komponente, die im Neumorphism-Stil für den Konsum von Inhalten mit einem komplementären Farbschema entwickelt wurde.

Offen

Retro_Vintage_Loader_Component

Eine einfache, reaktionsschnelle Loader-Komponente im Retro-/Vintage-Stil mit Sepia-/Brauntönen, die sich für Event- und Konferenz-Websites eignet und den Dunkelmodus unterstützt.

Offen