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