CSS 로더 생성기 - 스피너 및 로딩 애니메이션 온라인

실시간 미리보기와 커스터마이징이 가능한 순수 CSS 로딩 애니메이션을 만드세요

미리보기

코드

<style>
.loader {
  width: 48px;
  height: 48px;
  border: calc(48px / 8) solid #93c5fd;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spinnerBorder-spin 1s linear infinite;
}

@keyframes spinnerBorder-spin {
  to {
    transform: rotate(360deg);
  }
}
</style>

<div class="loader"></div>

자주 묻는 질문

CSS 로더 생성기란 무엇인가요?

CSS 로더 생성기는 개발자가 CSS 키프레임 애니메이션을 처음부터 작성하지 않고도 순수 CSS 로딩 애니메이션(스피너, 진행 표시기, 점, 바, 펄스 등)을 만들 수 있도록 도와주는 온라인 도구입니다. 로딩 인디케이터는 콘텐츠를 가져오거나 처리하거나 로드할 때 시각적 피드백을 제공하는 필수 UI 구성 요소입니다. 이 도구는 색상, 크기, 애니메이션 속도를 사용자 정의할 수 있는 미리 만들어진 로더 디자인 갤러리를 제공하며, 프로덕션에 바로 사용할 수 있는 깔끔하고 복사 가능한 HTML 및 CSS 코드로 내보낼 수 있습니다.

이 CSS 로더 생성기는 어떻게 사용하나요?

1. 로더 갤러리를 탐색하고 디자인에 맞는 로더 스타일(스피너, 점, 바, 펄스, 링, 기타 스타일)을 클릭합니다. 2. 카테고리 탭을 사용하여 유형별로 로더를 필터링합니다. 3. 색상 선택기를 사용하여 기본 색상을 사용자 정의합니다. 4. 크기 슬라이더(16-96px)와 속도 슬라이더(0.3-3.0초)를 조정합니다. 5. 미리보기 배경을 밝은 색과 어두운 색 사이에서 전환합니다. 6. 출력 형식(HTML, CSS 또는 결합)을 선택하고 복사를 클릭합니다.

데이터는 안전한가요? 서버로 전송되는 것이 있나요?

네, 데이터는 완전히 안전합니다. 이 도구는 클라이언트 측 JavaScript와 CSS를 사용하여 전적으로 브라우저에서 실행됩니다. 설정, 색상 값 또는 코드 출력이 서버로 전송되지 않습니다. 로더 애니메이션은 순수 CSS를 사용하여 브라우저에서 직접 렌더링됩니다. 한 번 로드되면 오프라인에서도 작동합니다.

GIF, SVG 또는 JavaScript 애니메이션 대신 순수 CSS 로더를 사용하는 이유는 무엇인가요?

순수 CSS 로더는 여러 가지 장점을 제공합니다: (1) 성능 — CSS 애니메이션은 GPU에 의해 하드웨어 가속되어 더 부드러운 60fps 애니메이션을 제공합니다. (2) 확장성 — CSS 로더는 픽셀화 없이 모든 크기에서 완벽하게 확장됩니다. (3) 파일 크기 — CSS 로더는 GIF 파일(각 10-50KB)에 비해 사실상 제로 바이트를 추가합니다. (4) 사용자 정의 — 색상, 크기, 속도를 CSS 속성을 통해 즉시 변경할 수 있습니다. (5) 무의존성 — JavaScript 라이브러리나 이미지 파일이 필요 없습니다. (6) 접근성 — CSS 애니메이션은 prefers-reduced-motion 미디어 쿼리에 응답합니다.

CSS 로딩 애니메이션은 기술적으로 어떻게 작동하나요?

CSS 로딩 애니메이션은 여러 CSS 기능을 결합합니다: @keyframes 규칙은 애니메이션 시퀀스(예: 회전, 크기 조절, 투명도 전환)를 정의합니다. animation 단축 속성은 지속 시간, 타이밍 함수, 반복 횟수와 함께 키프레임을 적용합니다. 가상 요소(::before, ::after)는 단일 HTML 요소에서 다중 파트 애니메이션을 가능하게 합니다. CSS transform 속성(rotate, scale, translate)은 GPU 합성을 통해 시각적 변경을 효율적으로 처리합니다. animation-delay는 여러 요소에 걸쳐 시차 효과를 만듭니다.

복사한 후 생성된 로더 CSS를 사용자 정의할 수 있나요?

네, 생성된 CSS는 자유롭게 수정할 수 있는 표준적이고 잘 포맷된 코드입니다. CSS 변수 출력 모드를 사용하면 :root 사용자 정의 속성 값을 업데이트하기만 하면 색상, 크기, 속도를 변경할 수 있습니다 — 이는 테마 설정에 특히 유용합니다. .loader 클래스 이름을 바꾸거나, animation-timing-function을 조정하거나, 키프레임 백분율을 수정할 수도 있습니다.

CSS 로더를 접근성 있게 만들려면 어떻게 해야 하나요?

CSS 로더를 접근성 있게 만들려면: (1) 로더 요소에 role="status"와 aria-label="Loading"을 추가합니다. (2) 로더 내부에 <span class="sr-only">Loading...</span>과 같은 시각적으로 숨겨진 텍스트를 포함합니다. (3) @media (prefers-reduced-motion: reduce) { .loader { animation: none; } }를 추가하여 prefers-reduced-motion을 존중합니다. (4) 로더와 배경 사이의 충분한 색상 대비를 확보합니다.

코드 예제

// CSS Loader Generator - JavaScript Implementation

const LOADERS = {
  spinnerBorder: {
    name: 'Border Spinner',
    category: 'spinner',
    html: '<div class="loader"></div>',
    css: (color, size, speed) => `
.loader {
  width: ${size}px;
  height: ${size}px;
  border: ${Math.round(size / 8)}px solid #f3f3f3;
  border-top: ${Math.round(size / 8)}px solid ${color};
  border-radius: 50%;
  animation: loader-spin ${speed}s linear infinite;
}

@keyframes loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}`,
  },
  bouncingDots: {
    name: 'Bouncing Dots',
    category: 'dots',
    html: '<div class="loader"><span></span><span></span><span></span></div>',
    css: (color, size, speed) => `
.loader {
  display: flex;
  gap: ${Math.round(size / 6)}px;
  align-items: center;
}

.loader span {
  width: ${Math.round(size / 4)}px;
  height: ${Math.round(size / 4)}px;
  background-color: ${color};
  border-radius: 50%;
  animation: loader-bounce ${speed}s ease-in-out infinite;
}

.loader span:nth-child(2) {
  animation-delay: ${(-speed / 3).toFixed(2)}s;
}

.loader span:nth-child(3) {
  animation-delay: ${(-speed / 6).toFixed(2)}s;
}

@keyframes loader-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}`,
  },
};

function generateLoader(loaderId, options = {}) {
  const { color = '#3b82f6', size = 48, speed = 1.0 } = options;
  const loader = LOADERS[loaderId];
  if (!loader) throw new Error(`Unknown loader: ${loaderId}`);
  return {
    html: loader.html,
    css: loader.css(color, size, speed).trim(),
  };
}

// Usage
const result = generateLoader('spinnerBorder', {
  color: '#ef4444', size: 64, speed: 0.8
});
console.log('HTML:', result.html);
console.log('CSS:', result.css);