우리는 스피너를 살펴보았습니다. 우리는 점을 살펴보았습니다. 이제 로더에 대한 또 다른 일반적인 패턴을 다룰 것입니다. 바. 그리고 이 시리즈의 세 번째 기사에서도 하나의 요소와 변형을 쉽게 생성할 수 있는 유연한 CSS로 만들어 다른 기사와 동일한 작업을 수행할 것입니다.
기사 시리즈
- 단일 요소 로더: 스피너
- 단일 요소 로더: 점
- 단일 요소 로더: 바 — 당신은 여기에있다
- 단일 요소 로더: 3D로 전환 — 오는 1월 XNUMX일
하나도 아니고 둘도 아닌 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-*
그라디언트 색상을 추가했습니다. 그렇게 간단하면서도 또 다른 멋진 로더를 얻을 수 있습니다.
그렇다면 점과 막대 사이에는 차이가 없습니까?
차이 없음! 가능한 한 많은 예를 다루기 위해 두 개의 다른 기사를 작성했지만 둘 다 동일한 기술에 의존하고 있습니다.
- 모양을 만들기 위한 그라디언트(점 또는 막대 또는 다른 것)
- 애니메이션
background-size
및 / 또는background-position
로더 애니메이션을 만들려면 - 마스크를 추가하여 색상 터치 추가
막대 반올림
이번에는 막대의 가장자리를 둥글게 할 수 있는 다른 것을 시도해 보겠습니다.
하나의 요소와 그 요소를 사용하여 ::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; }
이제 높이를 애니메이션하고 지연을 추가하기만 하면 됩니다! 다음은 색상과 크기만 다른 세 가지 예입니다.
최대 포장
지금까지 복잡해 보이는 로딩 애니메이션을 만드는 데 필요한 모든 기능에 대해 큰 격려를 받았으면 합니다. 우리가 필요로 하는 것은 하나의 요소, 즉 막대를 그리는 데 필요한 그래디언트 또는 의사와 사물을 이동하는 몇 가지 키프레임뿐입니다. 이것이 무한한 가능성을 얻기 위한 전체 레시피이므로 나가서 깔끔한 요리를 시작하세요!
다음 글까지 제가 합치는 재미있는 로더 모음으로 여러분께 남겨 드리겠습니다. 점들 및 바!
기사 시리즈
- 단일 요소 로더: 스피너
- 단일 요소 로더: 점
- 단일 요소 로더: 바 — 당신은 여기에있다
- 단일 요소 로더: 3D로 전환 — 오는 1월 XNUMX일
단일 요소 로더: 바 원래에 게시 CSS 트릭. 너는해야한다. 뉴스레터 받기.
- "
- 3d
- a
- 추가
- All
- 다른
- 답변
- 신청
- 지역
- 약
- 기사
- 기사
- 배경
- 바
- 전에
- 사이에
- 양쪽
- 얻을 수 있습니다
- 암호
- 수집
- 조합
- 공통의
- 복잡한
- 구성
- 함유량
- 제어
- 엄호
- 만들
- 만든
- 거래
- 세부 묘사
- 상세한
- DID
- 차이
- 다른
- 치수
- 디스플레이
- 마다
- 요소
- 등
- 예
- FAST
- 그림
- 먼저,
- 수정
- 융통성있는
- 수행원
- FRAME
- 이상한
- 추가
- 점점
- 가는
- 초록색
- 그리드
- 신장
- 여기에서 지금 확인해 보세요.
- 기대
- 방법
- How To
- HTTPS
- 독립하여
- IT
- 7월
- 배우다
- 휴가
- 작은
- 하중
- 로드
- 보고
- 유지하다
- 확인
- 제작
- 유튜브 영상을 만드는 것은
- 마스크
- math
- 수도
- 배우기
- 움직임
- 곱하기
- 요구
- 다음 것
- 번호
- 열 수
- 기타
- 부품
- 무늬
- 연극
- 연주
- 부디
- 위치
- 위치하는
- 가능성
- 가능한
- 힘
- 속성
- 재산
- 출판
- 반올림
- 같은
- 연속
- 모양
- 비슷한
- 단순, 간단, 편리
- 단일
- 크기
- 크기
- So
- 일부
- 무언가
- 공간
- 스타트
- 기법
- XNUMXD덴탈의
- 맡은 일
- 일
- 세
- 시간
- 터치
- 변환
- 업데이트
- 업데이트
- us
- 사용
- 뭐
- 없이
- 일