로더 구성 요소

보색 구성표가 있는 간단한 다크 모드 로더 구성 요소입니다.

미리 보기

HTML 코드

<div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="relative">
    <div class="h-24 w-24 rounded-full border-t-8 border-b-8 border-purple-500"></div>
    <div class="absolute top-0 left-0 h-24 w-24 rounded-full border-t-8 border-b-8 border-pink-500 animate-spin"></div>
  </div>
</div>

관련 구성 요소

뉴모피즘 로더

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 Neumorphism 스타일의 로더 구성 요소입니다. JavaScript가 필요하지 않습니다. 미묘한 그림자를 사용하여 배경에서 돌출된 효과를 만듭니다. CSS에서 지원되는 다크 모드.

열다

Brutalist_Music_Loader

음악/오디오 플랫폼을 위한 브루탈리즘에서 영감을 받은 로딩 구성 요소로, 고대비 보라색/보라색 톤과 다크 모드를 지원하는 반응형 디자인이 특징입니다. '음악 웨이브' 또는 '재생' 로딩 상태를 시뮬레이션합니다.

열다

Retro_Vintage_Loader_Component

세피아/브라운 톤의 단순하고 반응성이 뛰어난 레트로/빈티지 테마 로더 구성 요소로, 이벤트 및 컨퍼런스 웹 사이트에 적합하며 다크 모드를 지원합니다.

열다