Загрузчик нейроморфизма
Компонент-загрузчик в стиле Neumorphism с отзывчивыми эффектами и поддержкой темных тем с использованием Tailwind CSS. JavaScript не нужен. Использование тонких теней для создания эффекта выдавливания из фона. Темный режим поддерживается с помощью CSS.
HTML-код
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="w-32 h-32 relative">
<div class="absolute inset-0 bg-gray-300 dark:bg-gray-700 rounded-full neumorphic-shadow dark:neumorphic-shadow-dark animate-ping"></div>
<div class="absolute inset-0 flex items-center justify-center text-gray-600 dark:text-gray-300">
Loading...
</div>
</div>
</div>
<style>
.neumorphic-shadow {
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .neumorphic-shadow-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #555555;
}
@keyframes ping {
0% {
transform: scale(0.8);
opacity: 1;
}
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
</style>Связанные компоненты
Компонент погрузчиков
Компонент Loaders, выполненный в стиле Material Design с адаптивными эффектами и поддержкой темных тем с использованием Tailwind CSS.
Компонент погрузчиков
Компонент загрузчиков, разработанный в скевоморфном стиле с использованием триадической цветовой схемы для блога или веб-сайта, ориентированного на контент. Он имеет простую компоновку, подходящую для потребления контента, включая поддержку темного режима.
Компонент погрузчиков
Компонент загрузчика, выполненный в стиле Material Design, с отзывчивыми эффектами и поддержкой темных тем с использованием Tailwind CSS.