CCHub Logo CCHub Tailwind Collection
コンポーネント ローダー ニューモーフィズムローダー

ニューモーフィズムローダー

レスポンシブエフェクトとTailwind CSSを使用したダークテーマのサポートを備えたNeumorphismスタイルのローダーコンポーネント。JavaScriptは必要ありません。微妙な影を使用して、背景から押し出された効果を作成します。ダークモードはCSSでサポートされています。

プレビュー

HTMLコード 

<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>

関連コンポーネント

ローダーコンポーネント

マテリアル デザイン スタイルで設計されたローダー コンポーネントで、レスポンシブ エフェクトと Tailwind CSS を使用したダーク テーマのサポートが特徴です。

開ける

ニューモーフィズムローダー

ポートフォリオ用の単色の配色を備えたシンプルなNeumorphismローダーコンポーネントで、レスポンシブデザインとダークテーマがサポートされています。

開ける

ローダーコンポーネント

3D デザインされた Loaders コンポーネントで、奥行きとエンゲージメントを備えたロード アニメーション、レスポンシブ エフェクト、Tailwind CSS を使用したダーク テーマのサポートを紹介しています。

開ける