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