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

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

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

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

HTML-код

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="loader-container grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-blue-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-green-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-red-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-yellow-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-purple-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-pink-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
    </div>
</div>

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

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

Простой компонент загрузчика в темном режиме с дополнительной цветовой гаммой.

Открытый

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

Отзывчивый компонент Loaders, предназначенный для темного режима, с земляными тонами и умеренной сложностью для демонстрации портфолио.

Открытый

Organic_Nature_Inspired_Food_Loader

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

Открытый