Softonic

오버레이 스피너 CSS 생성기

단계 1 / 2
다음

로딩 오버레이는 반투명한 층으로 페이지를 덮고 가운데에 스피너를 둡니다. 여기서 스피너를 만든 뒤, 아래의 짧은 래퍼 CSS를 추가해 콘텐츠 위의 가운데에 맞추세요.

오버레이 스피너 만드는 방법

  1. 1

    더 큰 크기 선택하기

    크기 칸에 70~90, 두께 칸에 6~8을 입력해 전체 페이지에서도 스피너가 잘 보이도록 합니다.

  2. 2

    강한 색 고르기

    오버레이 배경 위에서 눈에 띄는 호의 색을 고르세요.

  3. 3

    생성된 CSS 복사하기

    복사 버튼으로 로더와 @keyframes 규칙을 복사합니다.

  4. 4

    래퍼 추가하기

    이 페이지의 오버레이 규칙을 붙여 넣고, 로더를 래퍼 안에 넣으세요.

두 부분: 스피너와 오버레이

생성기가 만드는 것은 스피너입니다. .loader 클래스와 @keyframes spin 규칙입니다. 오버레이는 여러분이 직접 추가하는 별도의 래퍼입니다. 래퍼는 뷰포트 전체를 덮고 자식 요소를 가운데에 둡니다. 이렇게 나누면 같은 스피너를 버튼이나 카드에서도 재사용할 수 있고, 화면 전체를 막는 상태가 필요할 때만 래퍼를 쓰면 됩니다.

래퍼 CSS

생성된 규칙 뒤에 다음을 붙여 넣으세요.

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1000;
}

<div class="overlay" role="status" aria-label="로딩 중">
  <div class="loader"></div>
</div>

inset: 0과 함께 쓴 position: fixed는 층을 화면의 네 가장자리까지 늘립니다. flex 설정은 스피너를 가로와 세로 모두 가운데에 맞춥니다. z-index는 층이 일반 콘텐츠 위에 보이도록 합니다. 헤더나 모달이 여전히 위에 보인다면 이 값을 더 올리세요.

페이지 전체가 아닌 한 영역만 덮기

카드나 테이블만 불러오는 중이라면, 그 컨테이너에 position: relative를 주고 래퍼를 position: absolute로 바꾸세요.

.panel { position: relative; }
.panel .overlay { position: absolute; }

나머지 페이지는 계속 사용할 수 있고, 그 패널만 흐려집니다.

페이지에 맞는 오버레이 색 고르기

페이지 배경 오버레이 배경 호의 색
흰색 rgba(255, 255, 255, 0.75) 브랜드 색
어두움 rgba(0, 0, 0, 0.6) 밝고 선명한 색

어두운 페이지에서는 붙여 넣은 로더 CSS의 트랙 색 #eee도 바꿔서, 고리가 너무 강하게 빛나지 않도록 하세요.

좋은 사용 습관

  • 작업이 끝나면 바로 오버레이를 제거하세요. 그렇지 않으면 페이지가 계속 막힌 상태로 남습니다.
  • 짧은 대기에 사용하세요. 오래 걸리는 작업이라면 무엇이 진행 중인지 설명하는 텍스트를 보여 주세요.
  • 오버레이와 포커스 처리는 여러분의 마크업입니다. 이 도구는 스피너만 출력합니다.

페이지 스크롤 막기

고정 오버레이는 페이지를 가리지만, 그 뒤의 페이지는 휠이나 터치로 여전히 스크롤될 수 있습니다. 이것이 문제라면, 오버레이가 보이는 동안 body에 overflow: hidden;을 추가하고, 오버레이가 사라지면 제거하세요. 이 규칙은 오버레이를 보이고 숨기는 바로 그 순간과 함께 묶어서, 두 동작이 어긋나지 않도록 하세요.

자주 묻는 질문

아니요. 생성기는 스피너 CSS만 만듭니다. 오버레이 래퍼는 이 페이지에 나온 몇 줄의 CSS이며, 스피너 옆에 붙여 넣으면 됩니다.

래퍼를 inset: 0으로 고정하고, display: flex와 align-items: center, justify-content: center를 사용하세요. 그러면 스피너가 가운데에 놓입니다.

다른 요소의 쌓임 순서가 더 높기 때문입니다. 오버레이의 z-index를 그 요소보다 높이세요.

네. 화면을 덮는 고정 층이 그 아래 요소 대신 클릭을 받습니다. 로딩 중에는 보통 이것이 원하는 동작입니다.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

XSD 검증기

XML 문서를 XSD 스키마에 대해 검증하고, 요소와 타입 불일치를 정확한 줄 번호와 함께 보고합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

이 도구는 다른 언어로도 제공됩니다

사용 가이드와 활용 사례