단일 요소 로더: 점

우리는 이 시리즈의 로더를 보고 있습니다. 그 외에도 몇 가지 일반적인 로더 패턴과 단일 div로 패턴을 다시 만드는 방법을 설명합니다. 지금까지 우리는 클래식 스피닝 로더. 이제 여러분이 잘 알고 있는 또 다른 하나를 살펴보겠습니다. 점.

도트 로더는 어디에나 있습니다. 그들은 일반적으로 춤을 추는 텍스트 줄임표(...)처럼 보이는 세 개의 점으로 구성되어 있기 때문에 깔끔합니다.

여기서 우리의 목표는 단일 div 요소에서 동일한 것을 만드는 것입니다. 즉, 점당 하나의 div 또는 각 점에 대한 개별 애니메이션이 없습니다.

위의 로더 예제는 단일 div 요소, 몇 가지 CSS 선언 및 의사 요소 없이 만들어졌습니다. CSS를 사용하여 두 가지 기술을 결합하고 있습니다. background 및 mask. 작업이 끝나면 배경 그라디언트에 애니메이션을 적용하여 각 점이 연속적으로 위아래로 이동할 때 색상이 변경되는 환상을 만드는 데 도움이 되는 방법을 살펴보겠습니다.

배경 애니메이션

배경 애니메이션부터 시작하겠습니다.

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

이것이 꽤 간단해 보이길 바랍니다. 우리가 가진 것은 180px-넓은 .loader 각 두 색상 사이의 단단한 색상 정지를 나타내는 두 개의 원뿔형 그라디언트를 표시하는 요소 — 첫 번째 그라디언트는 상단 절반을 따라 빨간색과 파란색입니다. .loader, 그리고 두 번째 그라데이션은 아래쪽 절반을 따라 녹색과 보라색입니다.

로더의 배경 크기가 조정되는 방식(200% 와이드), 우리는 한 번에 각 절반에서 해당 색상 중 하나만 볼 수 있습니다. 그런 다음 배경 그라디언트의 위치를 ​​영원히 왼쪽, 오른쪽, 뒤로 밀어내는 이 작은 애니메이션이 있습니다.

배경 속성을 다룰 때 — 특히 background-position — 나는 항상 내 자세한 설명을 제공하는 스택 오버플로 답변 이 모든 것이 어떻게 작동하는지. CSS 배경 속임수가 불편한 경우 다음 단계에 도움이 되도록 해당 답변을 읽는 것이 좋습니다.

애니메이션에서 첫 번째 레이어가 Y=0% (상단에 위치) 동안 X 의 변경 사항입니다 0% 에 100%. 두 번째 레이어의 경우에도 동일합니다. X 비자 면제 프로그램에 해당하는 국가의 시민권을 가지고 있지만 Y=100% (하단에 배치).

사용하는 이유 conic-gradient() 대신 linear-gradient()?

좋은 질문! 직관적으로 선형 그라디언트를 사용하여 다음과 같은 XNUMX색 그라디언트를 만들어야 합니다.

linear-gradient(90deg, red 50%, blue 0)

그러나 우리는 또한 다음을 사용하여 같은 것에 도달할 수 있습니다. conic-gradient() — 그리고 더 적은 코드로. 우리는 코드를 줄이고 또한 그 과정에서 새로운 트릭을 배웁니다!

색상을 왼쪽과 오른쪽으로 슬라이드하는 것은 색상을 변경하는 것처럼 보이게 하는 좋은 방법이지만 대신 즉시 색상을 변경하는 것이 더 나을 수 있습니다. 그렇게 하면 로더 점이 동시에 두 가지 색상을 깜박일 가능성이 없습니다. . 이렇게 하려면 다음을 변경해 보겠습니다. animation의 타이밍 함수 linear 에 steps(1)

로더 도트

함께 따라하셨다면 이 시리즈의 첫 번째 기사, 다음에 무엇이 올지 알 것입니다. CSS 마스크! 마스크를 아주 훌륭하게 만드는 것은 그들이 우리에게 일종의 배경의 "잘라내기" 부분 다른 요소의 형태로. 따라서 이 경우 몇 개의 점을 만들고 점을 통해 배경 그라디언트를 표시하고 점의 일부가 아닌 배경 부분을 잘라내고 싶습니다.

우리는 사용할 것입니다 radial-gradient() 이를 위해 :

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

거기에 중복된 코드가 있으므로 CSS 변수를 만들어 내용을 줄여봅시다.

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

쿨쿨. 그러나 이제 애니메이션된 그라디언트 사이에서 점을 위아래로 이동하는 데 도움이 되는 새 애니메이션이 필요합니다.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

네, 총 XNUMX개의 방사형 그라디언트가 있습니다. 모두 동일한 구성과 동일한 크기입니다. 애니메이션은 각 그라디언트의 위치를 ​​업데이트합니다. 참고로 X 각 점의 좌표는 고정되어 있습니다. 그만큼 mask-position 첫 번째 점이 왼쪽(0%), 중앙에 있는 두 번째 것(50%), 오른쪽에서 세 번째(100%). 우리는 단지 업데이트 Y 에서 좌표 0% 에 100% 점을 춤추게 하기 위해.

우리가 얻은 것은 다음과 같습니다.

이제 이것을 그라데이션 애니메이션과 결합하면 마법이 일어나기 시작합니다.

도트 로더 변형

마지막 예제에서 만든 CSS 변수를 사용하면 훨씬 더 쉽게 새 색상을 바꾸고 동일한 로더를 더 많이 변형할 수 있습니다. 예를 들어, 다양한 색상과 크기:

점에 대한 또 다른 움직임은 어떻습니까?

여기에서 내가 한 일은 다른 위치를 고려하도록 애니메이션을 업데이트하는 것뿐이었습니다. 그리고 동일한 코드 구조를 가진 또 다른 로더를 얻었습니다!

마스크 레이어에 사용한 애니메이션 기술은 배경 레이어와 함께 사용하여 단일 색상으로 다양한 로더를 만들 수도 있습니다. 이에 대한 자세한 기사를 작성했습니다. 동일한 코드 구조에서 몇 가지 값만 변경하여 다른 변형을 만들 수 있음을 알 수 있습니다. 나는 기사의 끝에서 몇 가지 예를 공유하고 있습니다.

하나의 점이 있는 로더가 아닌 이유는 무엇입니까?

이것은 동일한 기술을 사용하고 있지만 더 간단한 논리를 사용하기 때문에 상당히 쉬울 것입니다.

여기에 내가 애니메이션을 적용하는 로더의 또 다른 예가 있습니다. radial-gradient 과 결합 CSS 필터 및 mix-blend-mode 덩어리 효과를 만들려면:

코드를 확인하면 내가 실제로 하고 있는 일은 애니메이션 background-position, 이전 로더와 동일하지만 대시를 추가합니다. background-size 점을 흡수함에 따라 얼룩이 커지는 것처럼 보이게 합니다.

그 얼룩 효과 뒤에 숨겨진 마법을 이해하려면 다음을 참조하세요. 이 대화형 슬라이드 (크롬만 해당) 작성자 아나 튜더 그녀가 주제를 너무 잘 다루기 때문입니다!

다음은 다른 기술을 사용하는 또 다른 도트 로더 아이디어입니다.

이것은 단 10개의 CSS 선언과 키프레임입니다. 기본 요소와 두 개의 유사 요소는 하나의 방사형 그래디언트를 사용하여 동일한 배경 구성을 갖습니다. 각각은 하나의 점을 생성하여 총 XNUMX개가 됩니다. 애니메이션은 각 점에 대해 서로 다른 지연을 사용하여 그라디언트를 위에서 아래로 이동합니다.

아, 그리고 이 데모에서 CSS 그리드를 사용하는 방법에 주목하세요. 이를 통해 그리드의 기본값을 활용할 수 있습니다. stretch 두 의사 요소가 부모의 전체 영역을 덮도록 정렬합니다. 사이즈는 필요없어요! 로 주위를 살짝 밀어 translate() 준비가 완료되었습니다.

더 많은 예!

요점을 집으로 가져오기 위해, 우리가 본 것의 실제로 변형된 많은 추가 예제를 여러분에게 남기고 싶습니다. 데모를 보면 여기에서 다룬 접근 방식이 매우 유연하고 수많은 디자인 가능성을 열어준다는 것을 알 수 있습니다.

다음…

자, 이 기사에서는 도트 로더를 다루었고 마지막 기사에서는 스피너를 다루었습니다. 이 XNUMX부작 시리즈의 다음 기사에서는 또 다른 일반적인 유형의 로더에 대해 알아보겠습니다. 바. 우리는 지금까지 배운 것을 많이 사용하여 가능한 한 적은 코드와 최대한의 유연성으로 또 다른 단일 요소 로더를 생성하기 위해 그것들을 확장할 수 있는 방법을 볼 것입니다.

---

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

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