단일 요소 로더: 스피너

CSS 전용 로더를 만드는 것은 제가 가장 좋아하는 작업 중 하나입니다. 그 무한한 애니메이션을 보는 것은 항상 만족스럽습니다. 그리고 물론 있습니다. 많은 기술과 접근 방식의 - 필요 없음 코드펜보다 더 멀리 바라보다 얼마나 많은지 확인하기 위해. 그러나 이 기사에서는 가능한 한 적은 코드를 작성하는 단일 요소 로더를 만드는 방법을 볼 것입니다.

내가 가진 500개 이상의 단일 div 로더 모음을 만들었습니다. 그리고 이 XNUMX부작 시리즈에서 저는 그 중 많은 것을 만드는 데 사용한 트릭을 공유할 것입니다. 우리는 작은 조정이 얼마나 재미있는 변형으로 이어질 수 있는지, 그리고 이 모든 것을 실현하기 위해 작성해야 하는 코드가 얼마나 적은지를 보여주는 수많은 예제를 다룰 것입니다!

이 첫 번째 기사에서는 더 일반적인 로더 패턴 중 하나인 회전 막대를 만들 것입니다.

접근 방식은 다음과 같습니다.

이 로더에 대한 간단한 구현은 부모 요소 안에 래핑된 각 막대에 대해 하나의 요소를 생성하는 것입니다(총 XNUMX개의 요소에 대해). opacity 과 transform 회전 효과를 얻으려면.

그러나 내 구현에는 단 하나의 요소만 필요합니다.

<div class="loader"></div>

… 그리고 10개의 CSS 선언:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

그것을 분해하자

언뜻 보기에는 코드가 이상해 보일 수 있지만 생각보다 간단하다는 것을 알게 될 것입니다. 첫 번째 단계는 요소의 차원을 정의하는 것입니다. 우리의 경우에는 150px 정사각형. 우리는 넣을 수 있습니다 aspect-ratio 요소가 무엇이든 상관없이 정사각형을 유지하도록 사용합니다.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

CSS 로더를 만들 때 항상 전체 크기를 제어하기 위해 하나의 값을 가지려고 합니다. 이 경우에는 width 그리고 우리가 다루는 모든 계산은 그 값을 참조할 것입니다. 이를 통해 로더를 제어하기 위해 단일 값을 변경할 수 있습니다. 많은 추가 값을 조정할 필요 없이 로더의 크기를 쉽게 조정할 수 있는 것이 항상 중요합니다.

다음으로 그라디언트를 사용하여 막대를 만듭니다. 이것은 가장 까다로운 부분입니다! 사용하자 한 만들 그라디언트 두 아래와 같은 막대:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

우리의 그라디언트는 하나의 색상과 두 개의 색상 정지점으로 정의됩니다. 결과는 페이딩이나 전환이 없는 단색입니다. 크기는 다음과 같습니다. 34% 넓고 8% 키가 큰. 또한 중앙(50%). 비결은 키워드 값을 사용하는 것입니다. space — 이것은 그라디언트를 복제하여 총 XNUMX개의 막대를 제공합니다.

~ 사양:

이미지는 잘리지 않고 배경 위치 지정 영역에 맞는 만큼 자주 반복된 다음 이미지가 해당 영역을 채우도록 간격을 둡니다. 첫 번째 이미지와 마지막 이미지가 영역의 가장자리에 닿습니다.

나는 다음과 같은 너비를 사용하고 있습니다. 34% 즉, XNUMX개 이상의 막대를 가질 수 없습니다(3*34% 보다 큰 100%) 그러나 두 개의 막대를 사용하면 빈 공간이 생깁니다(100% - 2 * 34% = 32%). 그 공간은 두 막대 사이의 중앙에 배치됩니다. 즉, 기울기에 너비를 사용합니다. 33% 과 50% 최소한 두 개의 막대 사이에 약간의 공간이 있는지 확인합니다. 가치 space 우리를 위해 올바르게 배치하는 것입니다.

우리는 동일한 작업을 수행하고 상단과 하단에 두 개의 막대를 더 만들기 위해 두 번째 유사한 그라데이션을 만듭니다. background 속성 값:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

반복을 피하기 위해 CSS 변수를 사용하여 최적화할 수 있습니다.

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

이제 우리는 XNUMX개의 막대를 갖게 되었고 CSS 변수 덕분에 색상 값을 한 번 작성할 수 있어 나중에 쉽게 업데이트할 수 있습니다(로더의 크기에 대해 수행한 것처럼).

나머지 막대를 만들려면 .loader 요소와 그 ::before 총 XNUMX개에 대해 XNUMX개의 막대를 추가로 얻기 위해 유사 요소를 사용합니다.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

사용 참고 display: grid. 이를 통해 그리드의 기본값에 의존할 수 있습니다. stretch 의사 요소가 상위 요소의 전체 영역을 덮도록 정렬합니다. 따라서 차원을 지정할 필요가 없습니다. 코드를 줄이고 많은 값을 처리하는 것을 피하는 또 다른 트릭입니다!

이제 의사 요소를 다음과 같이 회전해 보겠습니다. 45deg 나머지 막대의 위치를 ​​지정합니다. 트릭을 보려면 다음 데모를 가리키십시오.

불투명도 설정

우리가 하려는 것은 원형 경로를 이동할 때 그 뒤에 희미한 막대의 흔적을 남기는 막대가 하나 있다는 인상을 주는 것입니다. 지금 우리에게 필요한 것은 그 흔적을 만들기 위해 막대의 투명도를 가지고 노는 것입니다. 우리는 CSS로 할 것입니다. mask 다음과 같이 원추 기울기와 결합:

mask: conic-gradient(from 22deg,#0003,#000);

트릭을 더 잘 보기 위해 다음을 풀 컬러 상자에 적용해 보겠습니다.

빨간색의 투명도가 시계 방향으로 점차 증가합니다. 이것을 로더에 적용하고 불투명도가 다른 막대가 있습니다.

실제로 각 막대는 그라디언트로 가려져 있고 두 개의 반투명 색상 사이에 있기 때문에 희미하게 보입니다. 이것이 실행되면 거의 눈에 띄지 않으므로 모든 막대의 불투명도 수준이 다른 동일한 색상을 갖는다고 말할 수 있습니다.

회전

로더를 가져오기 위해 회전 애니메이션을 적용해 보겠습니다. 연속 애니메이션이 아니라 단계별 애니메이션이 필요하므로 steps(8). 8 막대의 수에 불과하므로 사용하는 막대의 수에 따라 값이 변경될 수 있습니다.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

그게 다야! 단 하나의 요소와 몇 줄의 CSS만 있는 로더가 있습니다. 하나의 값을 조정하여 크기와 색상을 쉽게 제어할 수 있습니다.

우리는 만 사용했기 때문에 ::before 유사 요소, 다음을 사용하여 막대를 XNUMX개 더 추가할 수 있습니다. ::after 총 12개의 막대와 거의 동일한 코드로 끝납니다.

고려할 의사 요소의 회전을 업데이트합니다. 30deg 과 60deg 대신 45deg XNUMX단계가 아닌 XNUMX단계 애니메이션을 사용하는 동안 높이도 줄였어요 5% 대신 8% 막대를 조금 더 얇게 만들기 위해.

우리가 가지고 있는 grid-area: 1/1 의사 요소에. 이를 통해 서로 같은 영역에 서로 겹쳐서 배치할 수 있습니다.

뭔지 맞춰봐? 다른 구현을 사용하여 동일한 로더에 도달할 수 있습니다.

코드 이면의 논리를 파악할 수 있습니까? 여기에 힌트가 있습니다: 불투명도는 더 이상 CSS로 처리되지 않습니다 mask 그러나 그라디언트 내부에서도 사용하고 있습니다. opacity 재산.

대신 점을 사용하지 않는 이유는 무엇입니까?

우리는 완전히 할 수 있습니다:

코드를 확인하면 선형 그래디언트 대신 방사형 그래디언트로 작업하고 있음을 알 수 있습니다. 그렇지 않으면 마스크가 불투명한 느낌을 주는 개념과 완전히 동일하지만 모양을 선 대신 원으로 만들었습니다.

다음은 새로운 그래디언트 구성을 설명하는 그림입니다.

Safari를 사용하는 경우 데모에 버그가 있을 수 있습니다. Safari는 현재 지원이 부족하기 때문입니다. at 방사형 그라디언트의 구문 그러나 이를 극복하기 위해 기울기를 약간 재구성할 수 있습니다.

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

더 많은 로더 예제

다음은 이전 것과 유사한 스피너 로더에 대한 또 다른 아이디어입니다.

이것 하나만으로 나는 의지한다. background 과 mask 모양을 생성합니다(의사 요소가 필요하지 않음). 또한 동일한 코드에서 많은 변형을 생성할 수 있도록 CSS 변수를 사용하여 구성을 정의하고 있습니다. 이는 CSS 변수의 능력에 대한 또 다른 예입니다. 이 기술에 대한 다른 기사를 썼습니다. 더 자세한 내용을 원하시면.

일부 브라우저는 여전히 -webkit- 접두사 mask-composite 고유한 값 집합이 있으며 데모에 스피너를 표시하지 않습니다. 여기에 그것을하는 방법이 있습니다 없이 mast-composite 더 많은 브라우저 지원을 위해.

당신을 위한 또 다른 것이 있습니다:

이를 위해 나는 사용하고 있습니다. background-color 색상을 제어하고 사용하려면 mask 과 mask-composite 최종 모양을 만들려면:

끝내기 전에 제가 얼마전에 만든 스피닝 로더를 몇 개 더 소개합니다. 나는 다른 기술에 의존하고 있지만 여전히 그라디언트, 마스크, 의사 요소 등을 사용하고 있습니다. 각각의 논리를 파악하고 동시에 새로운 트릭을 배우는 것은 좋은 연습이 될 수 있습니다. 즉, 질문이 있는 경우 아래에 의견 섹션이 있습니다.

최대 포장

보십시오, 단일 div, 두 개의 그라디언트, 의사 요소, 변수 외에는 CSS에서 할 수 있는 일이 너무 많습니다. 다양한 회전 로더를 만든 것처럼 보이지만 약간의 수정만 가하면 기본적으로 모두 동일합니다.

이것은 시작일 뿐입니다. 이 시리즈에서는 CSS 로더를 만들기 위한 더 많은 아이디어와 고급 개념을 살펴볼 것입니다.

---

단일 요소 로더: 스피너 원래에 게시 CSS 트릭. 너는해야한다. 뉴스레터 받기.

• 코인스마트. 유럽 ​​최고의 비트코인 ​​및 암호화폐 거래소.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 무료 액세스.
• 크립토호크. 알트코인 레이더. 무료 시험판.
• 출처: https://css-tricks.com/single-element-loaders-the-spinner/