CSS와 HTML로 빛나는 로더 만들기

우리는 우리 제품이 처음 사용하는 사용자에게 좋은 인상을 남기기를 원합니다. 그래서 우리는 무언가를 만들 때마다 먼저 그것을 가능하게 한 다음 그것이 조금 독특할 수 있는지 묻습니다. 그리고 빛나는 로더는 그러한 시도 중 하나입니다.

다음은 jsfiddle (33 changes)의 원본 버전입니다.

HTML 및 CSS로 나만의 로더 만들기

로더 디자인에는 컨테이너와 3가지 요소(배경 버튼, 빛나는 스피너 및 로고)가 있습니다. 버튼과 스피너는 모두 오버레이 레이어입니다(절대 위치 지정 사용).

다음과 같이 직선적인 HTML 마크업부터 시작하겠습니다.

<div class="logo-container">
  <span class="spinner"></span>
  <span class="background"></span>
  <img class="logo" src="yourlogo.svg" height="28" />
</div>

1. 용기

컨테이너의 주요 포인트는 요소를 함께 그룹화하고 중앙에 자식logo을 배치하는 것입니다. 이 예에서는 flex를 사용하겠습니다.

.logo-container {
  /* align children in the center */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  /* a circle with 60x60 pixels */
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

이제 일반 로고가 생겼습니다.



버튼 배경과 스피너로 들어가기 전에. 다음과 같이 절대 위치 지정을 적용하여 오버레이 레이어인지 확인해야 합니다.

.background,
.spinner {
  position: absolute;
  display: inline-block;
  height: 100%;
  width: 100%;
}

2. 버튼 배경

버튼 배경은 매트한 그라데이션과 그림자가 있는 원입니다. 한 가지 방법이 있습니다.

/* The button background layer */
.background {
  border-radius: 50%;
  background-image: linear-gradient(0deg, #0f1013, #252730);
  box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.6),
    0 4px 6px 1px rgba(0, 0, 0, 0.3),
    0 1px 2px 1px rgba(0, 0, 0, 0) inset,
    0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;
}

이제 다음과 같이 표시됩니다.

3. 로고를 앞으로 가져오기

로고가 보이지 않는 경우 z-index를 사용하여 logo를 맨 위에 가져와야 합니다. 다음 CSS와 같이 간단합니다.

.logo {
  z-index: 2;
}

4. 빛나는 스피너

빛나는 스피너 레이어는 그림자와 함께 top-border 속성을 사용하여 빛나는 효과를 추가합니다. 다음과 같이 할 수 있습니다.

.spinner {
  border-radius: 50%;
  border-top: 2px solid #ae34db;

  /* glowing with shadow (30% of #ae34db) */
  box-shadow: 0 -5px 5px #ae34db4d;

  /* add spin animation */
  animation: spin 1s linear infinite;
}

그런 다음 애니메이션 키프레임을 추가합니다. 기본적으로 라이트 스피너를 360도 원으로 회전시키는 키프레임입니다.

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

내부에 로고가 있는 빛나는 스피너가 보일 것입니다. 최종 결과는 다음과 같습니다.


spin 키프레임을 사용하여 빛나는 색상을 변경하거나 그림자를 더 확산시켜 사이렌 조명처럼 만들 수 있습니다.


이제 빛나는 로더를 만드는 방법을 알았습니다. 빛나는 회 전자와 함께 무광택 그라데이션 배경이 포함되어 있습니다. 최종 결과를 확인할 수 있습니다on jsfiddle ;

여러분의 생각을 알려주시고 지원해 주셔서 감사합니다.