HTML 코드
<div class="row">
<span class="spin"></span>
<button disabled><span class="spin sm"></span>저장 중…</button>
</div>
<style>
.row{display:flex;gap:20px;align-items:center}
.spin{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;display:inline-block;animation:r .8s linear infinite}
.sm{width:14px;height:14px;border-width:2px;border-top-color:var(--accent-fg);border-color:color-mix(in srgb,var(--accent-fg) 30%,transparent)}
button{font:inherit;display:inline-flex;gap:8px;align-items:center;border:0;background:var(--accent);color:var(--accent-fg);padding:9px 14px;border-radius:8px;opacity:.85}
@keyframes r{to{transform:rotate(360deg)}}
</style>AI에게 이렇게 요청하세요
저장 버튼을 누르면 완료될 때까지 버튼을 비활성화하고 버튼 글자 대신 작은 스피너 보여줘
<div class="row">
<span class="spin"></span>
<button disabled><span class="spin sm"></span>저장 중…</button>
</div>
<style>
.row{display:flex;gap:20px;align-items:center}
.spin{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;display:inline-block;animation:r .8s linear infinite}
.sm{width:14px;height:14px;border-width:2px;border-top-color:var(--accent-fg);border-color:color-mix(in srgb,var(--accent-fg) 30%,transparent)}
button{font:inherit;display:inline-flex;gap:8px;align-items:center;border:0;background:var(--accent);color:var(--accent-fg);padding:9px 14px;border-radius:8px;opacity:.85}
@keyframes r{to{transform:rotate(360deg)}}
</style>언제 쓰나
버튼 저장 중, 짧은 데이터 요청처럼 얼마나 걸릴지 모르는 짧은 대기.
비슷한 것과 차이
- 진행 바: 진행률(%)을 알 수 있을 때 (파일 업로드)
- 스켈레톤: 불러올 내용의 모양을 미리 보여줌