Компоненты Погрузчики Компонент погрузчиков

Компонент погрузчиков

Компонент Loaders, выполненный в бруталистском стиле с акцентом на интерактивность для бизнес/корпоративных сайтов, с аналогичной цветовой гаммой и адаптивным дизайном с поддержкой темного режима. Дизайн демонстрирует различные анимации погрузчика, которые передают смелую и грубую эстетику брутализма.

Предварительный просмотр

HTML-код

<div class="min-h-screen flex flex-col items-center justify-center bg-gray-200 dark:bg-gray-800">
    <h1 class="text-4xl font-bold mb-8 text-gray-900 dark:text-white">Loaders</h1>
    <div class="flex justify-around w-full max-w-4xl">
        <!-- Loader 1 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-blue-500 dark:bg-blue-700 w-16 h-16 mb-4 rounded-full animate-bounce"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 1</span>
        </div>

        <!-- Loader 2 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-green-500 dark:bg-green-700 w-16 h-16 mb-4 rounded-full animate-spin"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 2</span>
        </div>

        <!-- Loader 3 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-red-500 dark:bg-red-700 w-16 h-16 mb-4 rounded-full animate-ping"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 3</span>
        </div>
    </div>
</div>

<style>
    .loader::-webkit-animation: loader; /* For Safari */
    .loader-animation {
        animation: loader 1s infinite;
    }

    @keyframes loader {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
    }
</style>

Связанные компоненты

Загрузчик нейроморфизма

Компонент загрузчика в стиле Neumorphism и цветовой гамме Pastel для E-commerce. Простая сложность, адаптивность с поддержкой темного режима. Нет JavaScript.

Открытый

Компонент погрузчиков

Компонент загрузчика, разработанный на основе принципов Material Design с поддержкой Tailwind CSS для темного режима и отзывчивых эффектов.

Открытый

Загрузчик нейроморфизма

Компонент-загрузчик в стиле Neumorphism с отзывчивыми эффектами и поддержкой темных тем с использованием Tailwind CSS. JavaScript не нужен. Использование тонких теней для создания эффекта выдавливания из фона. Темный режим поддерживается с помощью CSS.

Открытый