CSS 로딩 스피너 생성기
링·점·펄스 등 스피너를 고르고 색·속도를 맞춰 순수 CSS로 복사하세요
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
링·이중 링·점·펄스·막대 다섯 가지 로딩 스피너 스타일을 고르고 크기·색상·속도를 조절해 실시간으로 미리 보는 도구입니다. 이미지나 외부 라이브러리 없이 순수 HTML·CSS 코드로 바로 복사할 수 있어 어떤 웹 프로젝트에도 가볍게 붙일 수 있습니다.
사용 방법
- 원하는 스피너 스타일 탭(링·이중 링·점·펄스·막대)을 고릅니다.
- 크기·두께·속도 슬라이더와 색상을 조절해 미리보기를 확인합니다.
- 'HTML 복사'와 'CSS 복사'(또는 전체 복사)로 코드를 가져옵니다.
- HTML을 로딩 위치에 넣고 CSS를 스타일시트에 붙여넣으면 끝입니다.
자주 묻는 질문
- 입력한 값이 서버로 전송되나요?
- 아니요. 스타일 선택·미리보기·코드 생성 전 과정이 사용자 브라우저 안에서만 처리됩니다. 어떤 값도 서버로 전송하거나 저장하지 않습니다.
- 이미지나 외부 라이브러리가 필요한가요?
- 필요 없습니다. 생성되는 코드는 순수 HTML과 CSS 애니메이션(@keyframes)뿐이라 GIF 이미지나 자바스크립트 라이브러리 없이 동작합니다.
- 스피너를 가운데 정렬하려면 어떻게 하나요?
- 스피너를 감싸는 부모 요소에 display:flex; justify-content:center; align-items:center; 를 주면 됩니다. 색상과 속도는 생성된 CSS의 값만 바꿔도 자유롭게 조절할 수 있습니다.