로더 구성 요소
비즈니스/기업 웹사이트의 상호 작용에 중점을 두고 브루탈리즘 스타일로 설계된 로더 구성 요소로, 유사한 색 구성표와 다크 모드를 지원하는 반응형 디자인이 특징입니다. 이 디자인은 브루탈리즘의 대담하고 생생한 미학을 포착하는 다양한 로더 애니메이션을 보여줍니다.
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>관련 구성 요소
Retro_Vintage_Loader_Component
세피아/브라운 톤의 단순하고 반응성이 뛰어난 레트로/빈티지 테마 로더 구성 요소로, 이벤트 및 컨퍼런스 웹 사이트에 적합하며 다크 모드를 지원합니다.
Brutalist_Music_Loader
음악/오디오 플랫폼을 위한 브루탈리즘에서 영감을 받은 로딩 구성 요소로, 고대비 보라색/보라색 톤과 다크 모드를 지원하는 반응형 디자인이 특징입니다. '음악 웨이브' 또는 '재생' 로딩 상태를 시뮬레이션합니다.