検索コンポーネント

カテゴリ

ローダー

コンテンツが読み込まれていることを示す視覚要素

ローダーコンポーネント

ビジネス/企業Webサイトのインタラクティブ性に焦点を当てたブルータリズムスタイルで設計されたローダーコンポーネントで、類似の配色とダークモードをサポートするレスポンシブデザインが特徴です。このデザインは、ブルータリズムの大胆で生々しい美学を捉えたさまざまなローダーアニメーションを紹介しています。

開けるプレビュー

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

ローダーコンポーネント

マテリアルデザインスタイルのローダーコンポーネントで、作業や製品を展示するためのレスポンシブデザインで、ダークテーマをフィーチャーし、Tailwind CSSを使用しています。

開けるプレビュー

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

ローダーコンポーネント

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

開けるプレビュー

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

グレースケールローディングスピナー

グレースケールカラーとマイクロインタラクションフォーカスを備えたシンプルなローディングスピナーコンポーネント。

開けるプレビュー

                <div class="flex items-center justify-center h-screen bg-white dark:bg-gray-900">
  <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-gray-900 dark:border-gray-100"></div>
</div>

ローダーコンポーネント

単色の配色を使用したダークモードのソーシャルメディアインターフェース用に設計されたシンプルなローダーコンポーネント。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="flex">
        <div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce mr-4"></div>
        <div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce"></div>
    </div>
    <div class="flex flex-col items-center ml-4">
        <h2 class="text-gray-200 dark:text-gray-100 text-xl mb-2">Loading...</h2>
        <div class="flex space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
        </div>
    </div>
</div>
<style>
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-15px);
        }
    }
</style>

ローダーコンポーネント

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

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="loader">
        <div class="rounded-lg border-4 border-blue-500 dark:border-blue-300 h-16 w-16 animate-spin"></div>
        <div class="mt-5 text-center">
            <img class="rounded-full h-12 w-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" />
            <div class="text-lg font-bold text-gray-800 dark:text-gray-200">Loading Content...</div>
        </div>
    </div>
</div>
<style>
    .loader {
        background: linear-gradient(145deg, #e6e6e6, #f0f0f0);
        border-radius: 15px;
        box-shadow: 20px 20px 60px #d1d1d1,
                    -20px -20px 60px #ffffff;
        padding: 20px;
    }
</style>

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

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

開けるプレビュー

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="flex space-x-2 animate-pulse">
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
  </div>
</div>

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

補色を持つNeumorphism Loaderコンポーネント

開けるプレビュー

                <div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="relative w-24 h-24">
    <div class="absolute top-0 left-0 w-full h-full rounded-full bg-gray-200 dark:bg-gray-700" style="box-shadow: inset 5px 5px 10px #b3b3b3, inset -5px -5px 10px #ffffff; dark:box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #626262;"></div>
    <div class="absolute top-0 left-0 w-full h-full rounded-full bg-gradient-to-r from-blue-500 to-purple-600 animate-spin" style="filter: blur(10px);"></div>
    <div class="absolute top-0 left-0 w-full h-full rounded-full border-4 border-transparent border-t-blue-500 border-b-purple-600 animate-spin"></div>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-gray-600 dark:text-gray-300 text-xl font-semibold">Loading</div>
  </div>
</div>

ミニマリストグレースケールローダー

ミニマリスト/フラットデザイン、グレースケールの配色、レスポンシブデザインとダークテーマをサポートするビジネス/企業Webサイト向けの適度な複雑さのローダーコンポーネント。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-16 h-16 border-4 border-gray-300 border-t-gray-900 rounded-full animate-spin dark:border-gray-700 dark:border-t-gray-100"></div>
</div>

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

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

開けるプレビュー

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="w-64 h-64">
    <div class="relative w-full h-full rounded-lg bg-gray-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="w-16 h-16 border-4 border-blue-500 border-solid rounded-full animate-spin border-t-transparent"></div>
      </div>
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="w-10 h-10 border-4 border-purple-500 border-solid rounded-full animate-spin border-t-transparent"></div>
      </div>
    </div>
  </div>
</div>

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

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

.shadow-neumorphic-light {
  box-shadow: 7px 7px 14px #b0b0b0, -7px -7px 14px #ffffff;
}

.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 14px #4a4a4a, -7px -7px 14px #363636;
}
</style>