Retro_Vintage_Loader_Component
セピア/ブラウンの色調のシンプルで応答性の高いレトロ/ビンテージをテーマにしたローダーコンポーネントは、イベントや会議のWebサイトに適しており、ダークモードのサポートを備えています。
HTMLコード
<div class="p-4 md:p-8 flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-mono">
<div class="w-full max-w-sm p-6 md:p-8 rounded-lg shadow-xl border-2 border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-gray-800 transform transition-transform duration-300 hover:scale-105">
<div class="text-center mb-6">
<p class="text-2xl md:text-3xl font-bold text-amber-900 dark:text-amber-200 uppercase tracking-widest leading-tight">
Initializing
</p>
<p class="text-sm md:text-base text-amber-700 dark:text-amber-400 mt-1">
Please stand by...
</p>
</div>
<div class="flex items-center justify-center space-x-2 animate-pulse mb-6">
<div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0s;"></div>
<div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.1s;"></div>
<div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.2s;"></div>
<div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.3s;"></div>
<div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.4s;"></div>
</div>
<div class="w-full bg-amber-200 dark:bg-gray-700 rounded-full h-3 mb-4 overflow-hidden retro-progress-bar">
<div class="bg-amber-700 dark:bg-amber-500 h-3 rounded-full animate-progress-fill origin-left" style="width: 0%;"></div>
</div>
<div class="text-center text-xs md:text-sm text-gray-600 dark:text-gray-400">
<p>Loading essential modules...</p>
</div>
</div>
<style>
.animate-bounce-custom {
animation: bounce-custom 1.5s infinite ease-in-out;
}
@keyframes bounce-custom {
0%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
}
@keyframes progress-fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.animate-progress-fill {
animation: progress-fill 2s forwards linear;
}
.retro-progress-bar {
box-shadow: inset 0 0 5px rgba(0,0,0,0.2) relevant;
}
</style>
</div>
関連コンポーネント
NeonGlowウェザーローダー
ネオングロー効果、ブラックとホワイトのベース、ダークモードのサポートを含む鮮やかなアクセントカラーを備えた、シンプルで応答性の高いウェザー/クライメートローダーコンポーネント。
ローダーコンポーネント
ビジネス/企業Webサイトのインタラクティブ性に焦点を当てたブルータリズムスタイルで設計されたローダーコンポーネントで、類似の配色とダークモードをサポートするレスポンシブデザインが特徴です。このデザインは、ブルータリズムの大胆で生々しい美学を捉えたさまざまなローダーアニメーションを紹介しています。
メンフィスゲーミングローダー
メンフィスのデザインにインスパイアされた遊び心のある大胆なゲーミングローダーで、80年代の雰囲気を醸し出す補色と幾何学的な形状が特徴です。完全にレスポンシブで、ダークモードをサポートします。