CSS 로더 생성기
무료 CSS 로더 생성기. 순수 CSS로 만든 10가지 로딩 스피너를 크기·속도·두께·색상을 실시간 조절하며 고르고, 바로 붙일 수 있는 HTML과 CSS를 복사하세요.
CSS 로더 생성기는 무엇을 만드나요?
순수 CSS로 움직이는 로딩 표시기를 만듭니다. 스피너·도트·바·리플·펄스·궤도·뒤집기·웨이브·바운스·그라데이션 링 10종을 각각 선택한 크기·속도·두께·색상으로 생성해 HTML과 CSS로 복사할 수 있게 제공합니다.
로더에 JavaScript나 이미지가 필요한가요?
아니요. 모든 로더는 일반 HTML 요소를 CSS 키프레임으로 움직인 것입니다. 이미지, 아이콘 폰트, 라이브러리, 런타임 스크립트가 전혀 없으며 CSS 블록만으로 충분합니다.
사이트에 로더를 넣으려면?
그리드에서 로더를 클릭하고, HTML 블록을 표시할 위치에 붙여넣은 뒤 CSS 블록을 스타일시트에 붙여넣으세요. CSS는 자체 완결형이며 필요한 @keyframes 규칙까지 포함합니다.
네 가지 파라미터는 무엇을 바꾸나요?
크기는 모든 로더의 가로세로, 속도는 애니메이션 시간, 두께는 테두리와 바의 너비를 담당하고, 색상은 그리드와 코드 출력의 모든 요소를 즉시 다시 칠합니다.
복사한 로더가 움직이지 않는 이유는?
가장 흔한 원인은 @keyframes 블록 없이 클래스 규칙만 복사했거나 HTML의 클래스명만 바꾼 경우입니다. 생성된 두 블록을 그대로 복사하고 클래스명은 그대로 두세요.
애니메이션 성능은 어떤가요?
좋습니다. 모든 로더는 transform과 opacity만 애니메이션하므로 브라우저가 GPU에서 합성하며 레이아웃이나 페인트를 유발하지 않습니다. 한 페이지에 여러 개여도 부드럽습니다.
접근성은 어떤가요?
스피너는 시각 장식이므로 스크린 리더에는 텍스트 힌트가 도움이 됩니다. 로더 옆에 숨은 "로딩 중" 라벨을 두거나, 로더에 aria-hidden="true"를 지정하고 진행 상황은 별도로 알려 주세요.
서버로 데이터가 전송되나요?
아니요. 생성기는 전부 브라우저 안에서 실행됩니다. 설정은 페이지를 떠나지 않고, 생성된 코드도 기기에서 로컬로 조립됩니다.
CSS 로더 생성기 사용 방법
CSS 로더 생성기는 순수 CSS만으로 애니메이션 로딩 스피너를 만듭니다. 이미지도, 자바스크립트도, 의존성도 없습니다. 열 가지 스타일 중 하나를 골라 크기·속도·굵기·색상을 조정한 뒤, 생성된 HTML과 CSS를 프로젝트에 바로 복사하세요.
- 네 개의 컨트롤로 전역 매개변수를 조정하세요. 크기는 각 로더의 박스를, 속도는 애니메이션 길이를, 굵기는 테두리와 막대 폭을 정하고, 색상은 모든 요소를 칠합니다.
- 그리드를 둘러보세요. 열 로더 모두 현재 설정으로 실시간 애니메이션 중이라 한눈에 비교됩니다. 로더를 클릭해 선택하세요.
- 상세 패널에는 선택한 로더가 더 크게 표시되고, 해당 HTML 스니펫과 알맞은 CSS(필요한 @keyframes 포함)가 함께 나옵니다.
- HTML 복사 또는 CSS 복사를 눌러 각 블록을 클립보드로 보내세요. CSS는 자립형입니다. 스타일시트에 붙여넣고, 로더가 나타날 자리에 HTML을 놓으면 됩니다.
- 매개변수를 바꾸면 그리드, 상세 미리보기, 두 코드 블록이 즉시 갱신됩니다.
순수 CSS 로더는 거의 대역폭을 쓰지 않고 어떤 화면에서도 선명합니다. 접근성을 위해 애니메이션에 텍스트 라벨을 곁들이고, 대략 0.5초 미만의 길이는 피하세요. 너무 빠르게 깜빡이는 스피너는 안심보다 불안을 줍니다.
관련 도구
- CSS 압축기 무료 온라인 CSS 압축기. 공백, 주석, 불필요한 문자를 제거하여 CSS 코드를 즉시 압축하고 최적화합니다. 파일 크기를 줄여 웹 성능을 향상시킵니다.
- CSS 뷰티파이어 CSS 코드를 즉시 포맷하고 정리합니다. 사용자 정의 옵션으로 압축된 CSS를 읽기 쉬운 코드로 변환합니다.
- 보더 레디우스 생성기 무료 온라인 border-radius 생성기. 핸들 8개를 드래그하거나 블롭 프리셋을 선택해 유기적인 CSS 셰이프를 만들고 코드를 바로 복사하세요.
- 색상 변환기 무료 온라인 색상 변환기. 비주얼 피커로 HEX, RGB, HSL, HSV 형식을 즉시 변환. 100% 비공개, 브라우저에서 실행.
- CSS 이징 생성기 무료 온라인 CSS 이징 생성기. 인터랙티브 곡선에서 cubic-bezier 제어점을 드래그하고, 18가지 프리셋 중 고르고, 반복되는 공 애니메이션으로 확인한 뒤 타이밍 함수를 즉시 복사하세요.
- CSS 텍스트 섀도 생성기 무료 온라인 CSS text-shadow 생성기. 오프셋, 블러, 색상, 불투명도를 조절해 여러 섀도 레이어를 쌓고, 네온·3D·레트로 프리셋을 적용해 즉시 CSS를 복사하세요.
- CSS 클립패스 생성기 무료 온라인 CSS clip-path 생성기. polygon, circle, ellipse, inset 모양을 드래그 가능한 점으로 디자인하고, 실시간 미리보기와 클릭 한 번으로 CSS 코드를 복사하세요.
- CSS Border Radius 생성기 시각적 CSS border-radius 생성기. 각 모서리를 독립적으로 조정하고 실시간 미리보기로 CSS 코드를 즉시 복사하세요.