コンポーネント ローダー ローダーコンポーネント

ローダーコンポーネント

Neumorphismスタイルでデザインされたシンプルなローダーコンポーネントで、補色の配色でコンテンツを消費します。

プレビュー

HTMLコード

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 shadow-neumorphism rounded-lg p-6 w-80">
        <div class="animate-pulse">
            <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mb-4"></div>
            <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full mb-4"></div>
            <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-5/6 mb-4"></div>
            <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-4/5"></div>
        </div>
    </div>
    <div class="mt-8 flex flex-col items-center">
        <img src="https://picsum.photos/100" class="rounded-full shadow-neumorphism" alt="Random image cat">
        <div class="mt-2 font-semibold text-lg text-gray-800 dark:text-gray-200">Loading...</div>
    </div>
</div>
<style>
    .shadow-neumorphism {
        box-shadow: 8px 8px 16px rgba(0,0,0,0.2), 
                    -8px -8px 16px rgba(255, 255, 255, 0.7);
    }
</style>

関連コンポーネント

ニューモルフィックローダー

ダークモードをサポートするeコマースサイト用のシンプルなNeumorphicローダーコンポーネント。

開ける

ダークモードローダー

ダークモードインターフェース用のローダーまたはスケルトンコンポーネントで、レスポンシブ機能を備えています。Javascriptは必要ありません。

開ける

ローダーコンポーネント

ブログやコンテンツ重視の Web サイト用にトライアドカラースキームを使用してスキューモーフィックスタイルでデザインされた Loaders コンポーネント。コンテンツの消費に適したシンプルなレイアウトが特徴で、ダークモードのサポートが組み込まれています。

開ける