인프런 커뮤니티 질문&답변
작성한 질문수
circle dasharray / dashoffset 사용시 궁금점
작성
·
500
답변 1
1
1분코딩
지식공유자
각도 0의 시작이 3시 방향이라서 그런건데요,
stroke-dashoffset의 수치를 원하는 값으로 조정해도 되는데
transform: rotate(-90deg)으로 circle 자체를 회전시켜주면 더 간단합니다.
아래 코드처럼 해보세요~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes loading-circle-ani {
0% { stroke-dashoffset: 157; }
75% { stroke-dashoffset: 0; }
}
.loading-circle {
width: 54px;
height: 54px;
}
.loading-circle circle {
stroke: black;
stroke-width: 4;
stroke-dasharray: 157;
stroke-dashoffset: 0;
fill: transparent;
animation: loading-circle-ani 5s infinite;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
</style>
</head>
<body>
<svg class="loading-circle"><circle cx="50%" cy="50%" r="25"></circle></svg>
</body>
</html>