안녕하세요~ 지난번에 만들었던 원형 스피너에 이어서 오늘은 프로그래스바를 만들어 보겠습니다.
원형바에 테두리가 처음부터 끝까지 조금씩 차오르는 애니메이션인데요~ 결화 화면부터 확인해 보겠습니다.
테두리 일부를 반복해서 rotate 하는 효과와 달리 시작점부터 끝까지 테두리가 차오르는 애니메이션 효과 입니다. 사용할 수 있는 다양한 방법이 있겠지만 svg를 이용하여 테두리를 그려주는 방법으로 오늘은 효과를 적용해 볼 계획입니다. 그럼 요소부터 만들어 볼까요?
1. svg 요소 그려주기
<style>
.container {
width: 200px;
height: 200px;
margin: 20px auto;
border: 1px solid white;
background-color: #19CE60;
}
.svg {
display: block;
margin: calc(50% - 30px) auto;
}
.border {
fill: none;
stroke: white;
stroke-width: 3;
opacity: 0.3;
}
.progress {
fill:none;
stroke: white;
stroke-width: 3;
}
</style>
<body>
<div class="container">
<svg width="60" height="60" class="svg">
<circle r="20" cx="30" cy="30" class="border"></circle>
<circle r="20" cx="30" cy="30" class="progress"></circle>
</svg>
</div>
</body>
컨테이너 영역 내부에 svg 태그를 width 60, height 60 크기로 만들어 주었습니다.
svg 내부에 투명한 테두리 원형 하나와 내부에 차오르는 효과를 줄 원형 두개를 그려 주겠습니다.
width의 절반인 30을 cx값으로 height의 절반인 30을 cy의 값으로 주어 중심점을 잡아줍니다. 반지름의 길이인 r을 20으로 주어, 반지름이 20인원형 두개를 그려주었습니다. 테두리 영역인 border에는 opacity값을 0.3으로 주어 투명하게 색상을 채우고 progress 원형에는 선명하게 색상을 채워 줍니다.
2. stroke-dasharray 값 설정
<style>
.progress {
fill:none;
stroke: white;
stroke-width: 3;
stroke-dasharray: 125.6;
}
</style>
progress 영역에 stroke-dasharray 값을 설정합니다. stroke-dasharray 속성은 전체선을 지정한 값에 따라 길이가 다른 점선의 형태로 나타내 줍니다. 원형 하나를 모두 채워주기 위해서는 원둘레의 길이를 구해야 하는데 원의 둘레를 구하는 식은 다음과 같습니다.
=> 2r* π
즉 2 * 20 * 3.14 = 125.6 이 원의 둘레의 길이입니다.
stroke-dasharray 값을 125.6 으로 주어 원형 하나를 풀로 채워주겠습니다.
3. stroke-dashoffset
<style>
.progress {
fill:none;
stroke: white;
stroke-width: 3;
stroke-dasharray: 125.6;
stroke-dashoffset: 125.6;
}
</style>
stroke-dashoffset은 값에따라 원형의 시작점부터 일정길이만큼 원형을 그려줍니다. 이때 시작점은 원형의 가장 오른쪽 부터 시작 됩니다.
4. 애니메이션 효과 주기
<style>
.progress {
fill:none;
stroke: white;
stroke-width: 3;
stroke-dasharray: 125.6;
stroke-dashoffset: 125.6;
animation: progress 2s ease-in-out infinite;
}
@keyframes progress {
100%
{
stroke-dashoffset: 0;
}
}
</style>
초기 stroke-dashoffset 값을 125.6으로 주어 원형을 하나도 채우지 않은 상태에서 animation을 통해 keyframes이 100%일때 stroke-dashoffset 값을 0으로 바꿔 원형을 채워 줍니다. 여기 까지 할 경우 시작지점인 오른쪽부터 원형이 채워지게 됩니다.
5. transform: rotate(-90deg)를 이용하여 회전
<style>
.progress {
fill:none;
stroke: white;
stroke-width: 3;
stroke-dasharray: 125.6;
stroke-dashoffset: 125.6;
animation: progress 2s ease-in-out infinite;
transform-origin: center;
transform: rotate(-90deg);
}
</style>
마지막으로 transform-origin 속성을 center로 지정하고, transform: rotate(-90deg) 속성으로 가운데를 기준으로 90도만큼 왼쪽으로 회전해 줍니다. 최종 결과화면을 확인해 볼까요?
오늘은 svg를 이용하여 테두리를 그려주어 원형 프로그래스바를 만들어 보았습니다. 요즘 여러가지 로딩바를 많이 만들어 보고 있는데 다음에 또다른 애니메이션을 가지고 찾아오겠습니다.
오늘은 이만~
'animation' 카테고리의 다른 글
| CSS 막대 로딩바 (크기가 변하는 막대 로딩바 만들기) (0) | 2023.01.12 |
|---|---|
| CSS 바운스볼 애니메이션 만들기 (bounce ball animation) (0) | 2023.01.09 |
| CSS 원형 로딩 스피너 (css circle loading spinners) (0) | 2022.12.22 |
| CSS 도트 확대 로딩바 (css dot loading bar) (0) | 2022.12.20 |
| CSS 테두리 효과 애니메이션(css border animation) (0) | 2022.12.19 |
댓글