Компонент погрузчиков
Простой компонент загрузчиков, выполненный в стиле 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>Связанные компоненты
Органический компонент погрузчика, вдохновленный природой
Высококонтрастный, вдохновленный природой компонент загрузки, подходящий для деловых и корпоративных веб-сайтов, с плавными линиями и поддержкой темного режима.
Компонент погрузчиков
Простой компонент загрузчика, разработанный для интерфейсов социальных сетей в темном режиме с использованием монохроматической цветовой схемы.
Загрузчик нейроморфизма
Компонент-загрузчик в стиле Neumorphism с отзывчивыми эффектами и поддержкой темных тем с использованием Tailwind CSS. JavaScript не нужен. Использование тонких теней для создания эффекта выдавливания из фона. Темный режим поддерживается с помощью CSS.