단일 요소 로더: 바

우리는 스피너를 살펴보았습니다. 우리는 점을 살펴보았습니다. 이제 로더에 대한 또 다른 일반적인 패턴을 다룰 것입니다. 바. 그리고 이 시리즈의 세 번째 기사에서도 하나의 요소와 변형을 쉽게 생성할 수 있는 유연한 CSS로 만들어 다른 기사와 동일한 작업을 수행할 것입니다.

하나도 아니고 둘도 아닌 20개의 바 로더 예부터 시작하겠습니다.

뭐?! 하나하나 자세하게 설명해주실거죠? 기사 치고는 너무하다!

얼핏 보면 그렇게 보일 수도 있어요! 그러나 그들 모두는 동일한 코드 구조에 의존하며 변형을 생성하기 위해 몇 가지 값만 업데이트합니다. 이것이 CSS의 모든 힘입니다. 우리는 하나의 로더를 생성하는 방법을 배우지 않고 단지 동일한 코드 구조를 사용하여 원하는 만큼 로더를 생성할 수 있는 다양한 기술을 배웁니다.

바를 만들어보자!

다음을 사용하여 치수를 정의하는 것으로 시작합니다. width (또는 height)와 aspect-ratio 비율을 유지하려면:

.bars { width: 45px; aspect-ratio: 1;
}

이 시리즈의 2부에서 도트 로더를 만든 방법과 매우 유사하게 배경에 선형 그래디언트가 있는 세 개의 막대를 "가짜"입니다.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

위의 코드는 우리에게 다음과 같은 결과를 줄 것입니다:

이 시리즈의 다른 기사와 마찬가지로 우리는 많은 것을 다룰 것입니다. background 속임수. 따라서 너무 빠르게 이동하고 있다고 느끼거나 좀 더 자세한 내용이 필요하다고 생각되면 해당 항목을 확인하십시오. 당신은 또한 읽을 수 있습니다 내가 주는 스택 오버플로 답변 자세한 설명 이 모든 것이 어떻게 작동하는지.

막대 애니메이션

요소의 크기나 위치에 애니메이션을 적용하여 바 로더를 생성합니다. 다음 애니메이션 키프레임을 정의하여 크기에 애니메이션을 적용해 보겠습니다.

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

무슨 일이 일어나고 있는지 볼까요? 0%와 100% 사이에서 애니메이션은 background-size 요소의 배경 그라디언트. 각 키프레임은 세 가지 배경 크기를 설정합니다(각 그래디언트에 대해 하나씩).

다음은 우리가 얻은 것입니다.

크기나 위치에 따라 다양한 애니메이션 구성을 사용하여 얻을 수 있는 모든 변형을 상상할 수 있습니까?

크기를 고정하자 20% 50% 이번에는 위치를 업데이트합니다.

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

...또 다른 로더를 얻습니다!

지금쯤이면 요령을 터득했을 것입니다. 키프레임으로 변환할 타임라인을 정의하기만 하면 됩니다. 크기, 위치 또는 둘 다를 애니메이션으로 만들 수 있습니다! — 우리의 손끝에 무한한 로더 가능성이 있습니다.

이러한 기술에 익숙해지면 더 나아가 더 복잡한 그라디언트를 사용하여 균일한 배우기 로더.

해당 데모의 마지막 두 가지 예에서 모든 바 로더는 동일한 기본 마크업 및 스타일과 다양한 애니메이션 조합을 사용합니다. 코드를 열고 각 프레임을 독립적으로 시각화해 보십시오. 수십 개를 만드는 것이 얼마나 상대적으로 간단한지 알게 될 것입니다. 수백이 아니라면 - 변형의.

멋져지기

우리가 도트 로더로 했던 마스크 트릭을 기억합니까? 이 시리즈의 두 번째 기사? 여기서도 똑같이 할 수 있습니다!

위의 모든 논리를 내부에 적용하면 mask 속성을 사용하면 배경 구성을 사용하여 로더에 멋진 색상을 추가할 수 있습니다.

데모를 하나 가져와서 업데이트해 보겠습니다.

내가 한 모든 것은 모든 업데이트 background-* 과 mask-* 그라디언트 색상을 추가했습니다. 그렇게 간단하면서도 또 다른 멋진 로더를 얻을 수 있습니다.

그렇다면 점과 막대 사이에는 차이가 없습니까?

차이 없음! 가능한 한 많은 예를 다루기 위해 두 개의 다른 기사를 작성했지만 둘 다 동일한 기술에 의존하고 있습니다.

1. 모양을 만들기 위한 그라디언트(점 또는 막대 또는 다른 것)
2. 애니메이션 background-size 및 / 또는 background-position 로더 애니메이션을 만들려면
3. 마스크를 추가하여 색상 터치 추가

막대 반올림

이번에는 막대의 가장자리를 둥글게 할 수 있는 다른 것을 시도해 보겠습니다.

하나의 요소와 그 요소를 사용하여 ::before 과 ::after 유사, 우리는 세 개의 동일한 막대를 정의합니다.

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

이것은 선형 기울기에 의존하지 않고 세 개의 막대를 제공합니다.

이제 트릭은 멋진 그라데이션으로 해당 막대를 채우는 것입니다. 연속 그라디언트를 시뮬레이션하려면 다음을 수행해야 합니다. background 속성. 위 그림에서 녹색 영역은 로더가 차지하는 영역을 정의합니다. 그 영역은 그라디언트의 크기여야 하며, 수학을 하면 레이블이 지정된 양쪽에 곱하는 것과 같습니다. S 다이어그램에서 또는 background-size: var(--s) var(--s).

요소가 개별적으로 배치되기 때문에 모든 요소가 겹치도록 각 요소 내부의 그라디언트 위치를 업데이트해야 합니다. 이런 식으로 우리는 그것이 실제로 세 개임에도 불구하고 하나의 연속적인 그라디언트를 시뮬레이션하고 있습니다.

메인 요소(중앙에 배치)의 경우 배경이 중앙에 있어야 합니다. 우리는 다음을 사용합니다:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

왼쪽에 있는 의사 요소의 경우 왼쪽에 배경이 필요합니다.

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

그리고 오른쪽에 있는 의사의 경우 배경을 오른쪽에 배치해야 합니다.

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

동일한 CSS 변수를 사용하여 --_i, 번역에 사용한 코드를 다음과 같이 작성할 수 있습니다.

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

이제 높이를 애니메이션하고 지연을 추가하기만 하면 됩니다! 다음은 색상과 크기만 다른 세 가지 예입니다.

최대 포장

지금까지 복잡해 보이는 로딩 애니메이션을 만드는 데 필요한 모든 기능에 대해 큰 격려를 받았으면 합니다. 우리가 필요로 하는 것은 하나의 요소, 즉 막대를 그리는 데 필요한 그래디언트 또는 의사와 사물을 이동하는 몇 가지 키프레임뿐입니다. 이것이 무한한 가능성을 얻기 위한 전체 레시피이므로 나가서 깔끔한 요리를 시작하세요!

다음 글까지 제가 합치는 재미있는 로더 모음으로 여러분께 남겨 드리겠습니다. 점들 과 바!

---

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

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