기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 진행 표시줄입니다. 크기 xs-xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
진행 구성 요소는 작업, 다운로드 또는 다단계 프로세스의 완료 상태를 시각화합니다. 의미 있는 HTML 진행 요소와 Tailwind CSS 스타일로 구축된 진행률 표시줄은 진행 상황을 사용자에게 명확하게 전달합니다. Frutjam 진행 시스템은 로딩 화면, 양식 및 대시보드에 유연하게 통합할 수 있도록 다양한 색상, 크기 및 애니메이션 상태를 지원합니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
|---|---|---|
| progress | 베이스 | 수평 진행률 표시줄 |
| progress-primary | 색상 | 기본 테마 색상 |
| progress-secondary | 색상 | 보조 테마 색상 |
| progress-accent | 색상 | 악센트 테마 색상 |
| progress-neutral | 색상 | 중립 테마 색상 |
| progress-info | 색상 | 정보 의미 색상 |
| progress-success | 색상 | 성공 의미 색상 |
| progress-warning | 색상 | 경고 의미 색상 |
| progress-error | 색상 | 오류 의미 색상 |
색상 변형
기본
1 2 3 4 5 | <progress class="progress w-56" value="0" max="100"></progress> <progress class="progress w-56" value="25" max="100"></progress> <progress class="progress w-56" value="50" max="100"></progress> <progress class="progress w-56" value="75" max="100"></progress> <progress class="progress w-56" value="100" max="100"></progress> |
1 2 3 4 5 | <progress className="progress w-56" value="0" max="100"></progress> <progress className="progress w-56" value="25" max="100"></progress> <progress className="progress w-56" value="50" max="100"></progress> <progress className="progress w-56" value="75" max="100"></progress> <progress className="progress w-56" value="100" max="100"></progress> |
주요한
html
1 2 3 4 5 | <progress class="progress progress-primary w-56" value="0" max="100"></progress> <progress class="progress progress-primary w-56" value="25" max="100"></progress> <progress class="progress progress-primary w-56" value="50" max="100"></progress> <progress class="progress progress-primary w-56" value="75" max="100"></progress> <progress class="progress progress-primary w-56" value="100" max="100"></progress> |
반성
html
1 2 3 4 5 | <progress class="progress progress-secondary w-56" value="0" max="100"></progress> <progress class="progress progress-secondary w-56" value="25" max="100"></progress> <progress class="progress progress-secondary w-56" value="50" max="100"></progress> <progress class="progress progress-secondary w-56" value="75" max="100"></progress> <progress class="progress progress-secondary w-56" value="100" max="100"></progress> |
악센트
html
1 2 3 4 5 | <progress class="progress progress-accent w-56" value="0" max="100"></progress> <progress class="progress progress-accent w-56" value="25" max="100"></progress> <progress class="progress progress-accent w-56" value="50" max="100"></progress> <progress class="progress progress-accent w-56" value="75" max="100"></progress> <progress class="progress progress-accent w-56" value="100" max="100"></progress> |
중립적
html
1 2 3 4 5 | <progress class="progress progress-neutral w-56" value="0" max="100"></progress> <progress class="progress progress-neutral w-56" value="25" max="100"></progress> <progress class="progress progress-neutral w-56" value="50" max="100"></progress> <progress class="progress progress-neutral w-56" value="75" max="100"></progress> <progress class="progress progress-neutral w-56" value="100" max="100"></progress> |
정보
html
1 2 3 4 5 | <progress class="progress progress-info w-56" value="0" max="100"></progress> <progress class="progress progress-info w-56" value="25" max="100"></progress> <progress class="progress progress-info w-56" value="50" max="100"></progress> <progress class="progress progress-info w-56" value="75" max="100"></progress> <progress class="progress progress-info w-56" value="100" max="100"></progress> |
성공
html
1 2 3 4 5 | <progress class="progress progress-success w-56" value="0" max="100"></progress> <progress class="progress progress-success w-56" value="25" max="100"></progress> <progress class="progress progress-success w-56" value="50" max="100"></progress> <progress class="progress progress-success w-56" value="75" max="100"></progress> <progress class="progress progress-success w-56" value="100" max="100"></progress> |
경고
html
1 2 3 4 5 | <progress class="progress progress-warning w-56" value="0" max="100"></progress> <progress class="progress progress-warning w-56" value="25" max="100"></progress> <progress class="progress progress-warning w-56" value="50" max="100"></progress> <progress class="progress progress-warning w-56" value="75" max="100"></progress> <progress class="progress progress-warning w-56" value="100" max="100"></progress> |
오류
html
1 2 3 4 5 | <progress class="progress progress-error w-56" value="0" max="100"></progress> <progress class="progress progress-error w-56" value="25" max="100"></progress> <progress class="progress progress-error w-56" value="50" max="100"></progress> <progress class="progress progress-error w-56" value="75" max="100"></progress> <progress class="progress progress-error w-56" value="100" max="100"></progress> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 진전 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.