로더 구성 요소
비즈니스/기업 웹사이트의 상호 작용에 중점을 두고 브루탈리즘 스타일로 설계된 로더 구성 요소로, 유사한 색 구성표와 다크 모드를 지원하는 반응형 디자인이 특징입니다. 이 디자인은 브루탈리즘의 대담하고 생생한 미학을 포착하는 다양한 로더 애니메이션을 보여줍니다.
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>