🔧
스켈레톤 로더 생성기
생성기 및 디자인 · 무료 온라인 도구
스켈레톤 화면 로딩 애니메이션 CSS 생성.
CoderNewbie 팀
기능
100%
16px
1.5s
Base
Highlight
.skeleton {
width: 100%;
height: 16px;
border-radius: 4px;
background-color: #1e293b;
background-image: linear-gradient(
90deg,
#1e293b 0%,
#334155 50%,
#1e293b 100%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s linear infinite;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}3가지 모양
모든 UI 자리 표시자를 위한 텍스트 막대, 사각형 및 원.
시머 애니메이션
@keyframes로 조정 가능한 속도의 linear-gradient 시머.
브랜드 색상
테마에 맞게 기본 및 강조 색상을 설정합니다.
스켈레톤 로더 생성기 사용 방법
- 1Configure the generator settings (colors, size, format, etc.).
- 2Enter any required input text or data.
- 3Click generate to create the output.
- 4Download or copy the generated result.
주요 기능
- ✓100% 무료 — 가입, 구독, 광고 없음
- ✓브라우저에서만 실행 — 데이터는 기기를 떠나지 않습니다
- ✓빠르고 가벼움 — 즉시 결과 확인
- ✓크로스 플랫폼 — 데스크톱, 태블릿, 모바일 지원
자주 묻는 질문
Can I use the generated content commercially?
Yes, all generated content (QR codes, gradients, colors) is free for personal and commercial use.
What output formats are available?
QR codes can be downloaded as PNG or SVG. Gradients generate CSS code. Colors output in HEX, RGB, and HSL.