CSS 로더 생성기

CSS 로딩 스피너 및 애니메이션 만들기

브라우저 처리데이터가 브라우저를 떠나지 않습니다

Loader Type

Appearance

Size48px
Border Width4px
Animation Speed1s
Primary Color
Secondary Color

Preview

CSS

.loader {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

HTML

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

About CSS 로더 생성기

CSS 로딩 스피너 및 애니메이션 만들기

Use this free online css 생성기 tool to work faster without installing extra software. The interface is built for quick input, clear output, and straightforward results on desktop and mobile devices.

Processing

This tool runs in your browser whenever possible, which keeps your inputs private and reduces unnecessary round-trips to the server.