Loaders Component
A Loaders Component designed in a Brutalist style with a focus on interactivity for business/corporate websites, featuring an analogous color scheme and responsive design with dark mode support. The design showcases different loader animations that capture the bold and raw aesthetic of brutalism.
HTML Code
<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>Related Components
Loaders Component
A Loaders Component designed with a skeuomorphic style using a triadic color scheme for a blog or content-focused website. It features a simple layout appropriate for content consumption, incorporating dark mode support.
MinimalistGrayscaleLoader
Minimalist/Flat Design, Grayscale color scheme, Moderate complexity Loader Component for Business/Corporate websites with responsive design and dark theme support.