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