CSS 로더 생성기
맞춤 CSS 로딩 애니메이션 생성.
크기40px
속도1.0s
빠름느림
<div class="loader"></div>.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #D94F30;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}순수 CSS 로딩 애니메이션 생성기
로딩 애니메이션(로더 또는 스피너)은 모든 현대 웹 앱에서 필수적인 시각 요소입니다. 처리 중임을 사용자에게 알려 체감 대기 시간을 줄이고 사용자 경험을 향상시킵니다.
우리 생성기에는 8가지 다른 유형의 로더가 포함되어 있습니다: 클래식 스피너, 바운스 도트, 이퀄라이저 바, 펄스, 체이싱 도트, 그리드, 링, 듀얼 링. 각각은 색상, 크기, 속도를 사용자 정의할 수 있습니다.
생성된 코드는 @keyframes 애니메이션을 사용한 순수 CSS이며, 외부 의존성이 없습니다. HTML과 CSS를 모두 복사하여 프로젝트에 바로 붙여넣을 수 있습니다.
자주 묻는 질문
로더에 JavaScript가 사용되나요?
아닙니다, 모든 로더는 @keyframes 애니메이션을 사용한 100% 순수 CSS입니다. JavaScript가 필요 없어 가볍고 빠르며 모든 프레임워크와 호환됩니다.
모든 브라우저와 호환되나요?
네, CSS @keyframes 애니메이션과 사용된 속성은 Chrome, Firefox, Safari, Edge를 포함한 모든 최신 브라우저와 호환됩니다.
같은 페이지에 여러 로더를 사용할 수 있나요?
네, 하지만 각 다른 인스턴스에 대해 ".loader" 클래스의 이름을 바꿔야 합니다(예: ".spinner-1", ".spinner-2"). 이렇게 하면 CSS 충돌이 방지됩니다.