단일 요소 로더 : 스피너-CSS 튜토리얼-php.cn

단일 요소 로더 : 스피너

CSS 전용 로더를 제작하는 것은 보람있는 과제입니다. 매혹적인 무한 애니메이션은 항상 만족 스럽습니다. Codepen은 방대한 기술을 보여 주지만이 기사는 최소한의 코드로 단일 요소 로더를 달성하는 데 중점을 둡니다.

500 개가 넘는 단일 div 로더를 개발 했으며이 4 부 시리즈는 사용 된 기술을 공유합니다. 우리는 수많은 예를 살펴보고, 미묘한 조정이 어떻게 다양한 결과를 산출하고, 코드가 어떻게 간결 할 수 있는지를 보여줍니다.

단일 요소 로더 시리즈 :

단일 요소 로더 : 스피너 - 당신은 여기 있습니다
단일 요소 로더 : 도트
단일 요소 로더 : 막대
단일 요소 로더 : 3D로 이동합니다

이 첫 번째 기사는 공통 로더 패턴 인 회전 막대를 만듭니다.

접근

간단한 접근 방식은 부모 내에서 여러 요소 (9,이 경우 9 개)를 사용합니다. 불투명도와 변형은 회전 효과를 만듭니다.

그러나 내 방법은 하나의 요소 만 사용합니다.

<div></div>

로그인 후 복사

... 및 10 CSS 선언 :

 .Loader {
  너비 : 150px; / * 크기 제어 */
  종횡비 : 1;
  디스플레이 : 그리드;
  마스크 : conic-gradient (22deg, #0003, #000);
  애니메이션 :로드 1s 단계 (8) 무한;
}
.짐을 싣는 사람,
.Loader : 전 {
  -_ g : 선형 그레이드 (#17177C 0 0) 50%; / * 여기에서 색상을 업데이트하십시오 */
  배경: 
    var (-_ g)/34% 8% 공간 비 반복, 반복,
    var (-_ g)/8% 34% 반복되지 않은 공간;
}
.Loader : 전 {
  콘텐츠: "";
  변환 : 회전 (45deg);
}
@keyframes load {
  to {transform : 회전 (1Turn); }
}

로그인 후 복사

코드 분석

코드는 처음에는 특이한 것처럼 보일 수 있지만 나타나는 것보다 간단합니다. 먼저 요소의 치수 - 150px 정사각형을 정의합니다. aspect-ratio 크기 조정에 관계없이 정사각형으로 유지됩니다.

 .Loader {
  너비 : 150px; / * 크기 제어 */
  종횡비 : 1; / * 제곱 모양 유지 */
}

로그인 후 복사

CSS 로더의 경우 단일 크기 제어 값이 이상적입니다. 여기서는 폭입니다. 모든 계산은 그것에 상대적입니다. 이를 통해 쉽게 크기 조정할 수 있습니다.

그라디언트는 막대를 만듭니다. 이것은 가장 복잡한 부분입니다. 단일 그라디언트는 두 개의 막대를 생성합니다.

 배경 : 선형 그레이드 (#17177C 0 0) 50%/34% 8% 공간 없음 반복;

로그인 후 복사

그라디언트는 하나의 색상과 두 개의 색상 정지를 사용하여 단색을 만듭니다. 크기의 크기는 34%, 높이는 8%이며 중앙 (50%). space 키워드는 그라디언트를 복제하여 두 개의 막대를 만듭니다.

사양에서 :

이미지는 클리핑되지 않고 배경 포지셔닝 영역에 맞는만큼 자주 반복되며 이미지는 영역을 채우기 위해 간격을두고 있습니다. 첫 번째 및 마지막 이미지는 영역의 가장자리에 닿습니다.

34% 너비는 2 개의 막대 (3 34%> 100%) 만 허용하며 갭 (100% -2 34% = 32%)을 남깁니다 . space 이 갭을 중앙에 위치시킵니다. 33%에서 50% 사이의 너비는 간격으로 최소 2 개의 막대를 보장합니다.

우리는 두 번째 그라디언트를 사용하여 두 개의 막대를 더 만듭니다.

 배경: 
 선형 그레이드 (#17177c 0 0) 50%/34% 8% 공간 없음 반복,
 선형 그레이드 (#17177C 0 0) 50%/8% 34% 반복되지 않은 공간;

로그인 후 복사

CSS 변수는 이것을 최적화합니다.

 -_ g : 선형 그레이드 (#17177C 0 0) 50%; / * 여기에서 색상을 업데이트하십시오 */
배경: 
 var (-_ g)/34% 8% 공간 비 반복, 반복,
 var (-_ g)/8% 34% 반복되지 않은 공간;

로그인 후 복사

이것은 4 개의 막대를 생성합니다. CSS 변수는 색상 업데이트를 단순화합니다.

.loader 요소와 그 ::before 총 8 개의 막대가 더 생성됩니다.

 .Loader {
  너비 : 150px; / * 크기 제어 */
  종횡비 : 1;
  디스플레이 : 그리드;
}
.짐을 싣는 사람,
.Loader :: 이전 {
  -_ g : 선형 그레이드 (#17177C 0 0) 50%; / * 여기에서 색상을 업데이트하십시오 */
  배경: 
    var (-_ g)/34% 8% 공간 비 반복, 반복,
    var (-_ g)/8% 34% 반복되지 않은 공간;
}
.Loader :: 이전 {
  콘텐츠: "";
  변환 : 회전 (45deg);
}

로그인 후 복사

display: grid 의사 요소가 부모의 영역을 커버하여 명시 적 차원이 필요하지 않도록합니다.

의사 원소를 45deg만큼 회전하면 나머지 막대가 있습니다.

불투명도 제어

페이딩 트레일을 떠나는 단일 막대의 효과는 conic-gradient 있는 CSS mask 사용하여 달성됩니다.

 마스크 : conic-gradient (22deg,#0003,#000);

로그인 후 복사

이 구배는 점차적으로 투명성을 시계 방향으로 증가시킵니다. 로더에 적용되어 페이딩 바 환상을 만듭니다. 마스킹으로 인해 각 막대가 사라지는 것처럼 보이며 다양한 불투명도의 인상이 생깁니다.

회전 애니메이션

steps(8) 사용하는 계단 애니메이션 (여기서 8은 막대 수)은 회전을 만듭니다.

 .Loader {
  애니메이션 :로드 3s 단계 (8) 무한;
}

@keyframes load {
  {transform : rotate (1Turn)}
}

로그인 후 복사

이것은 단일 요소, 최소 CSS 로더를 완성합니다. 크기와 색상은 쉽게 제어됩니다. Pseudo-Element ::after 를 추가하면 작은 코드 조정으로 12 개의 막대로 확장 될 수 있습니다. 다른 그라디언트 및 불투명도 기술을 사용하여 대체 구현도 가능합니다.