๐์ํ ์งํ๋ฅ ํ์์ค ๋ง๋๋ ๋ฐฉ๋ฒ | HTML CSS ์๋ฐ์คํฌ๋ฆฝํธ
12288 ๋จ์ด csshtmlbeginnersjavascript
์์ค ์ฝ๋:
๋งํฌ์ :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Progress Bar</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
<body>
<div class="skill">
<div class="outer">
<div class="inner">
<div id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#DA22FF" />
<stop offset="100%" stop-color="#9733EE" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" />
</svg>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #e3edf7;
height: 100vh;
display: flex;
-ms-align-items: center;
align-items: center;
justify-content: center;
}
.skill {
width: 160px;
height: 160px;
/* background-color: cornflowerblue;*/
position: relative;
}
.outer {
height: 160px;
width: 160px;
border-radius: 50%;
/* border: 2px solid orangered;*/
padding: 20px;
box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}
.inner {
height: 120px;
width: 120px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
/* border: 2px solid orangered*/
box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
-0.5px -0.5px 0px rgba(255, 255, 255, 1),
0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
0px 12px 10px -10px rgba(0, 0, 0, 0.05);
}
#number {
font-weight: 600;
color: #555;
}
circle {
fill: none;
stroke: url(#GradientColor);
stroke-width: 20px;
stroke-dasharray: 450;
stroke-dashoffset: 450;
animation: anim 2s linear forwards;
}
@keyframes anim {
100% {
stroke-dashoffset: 157.5;
}
}
/*Put it on the top of our circle*/
svg {
position: absolute;
top: 0;
left: 0;
}
๐ด ํ๋ก์ฐ:
ํ์ด์ค๋ถ: https://bit.ly/3cp2S5W
์ ํ๋ธ: https://bit.ly/3oBQbc0
์ธ์คํ๊ทธ๋จ{์ ๊ท}: https://bit.ly/3Ihh2EB
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐์ํ ์งํ๋ฅ ํ์์ค ๋ง๋๋ ๋ฐฉ๋ฒ | HTML CSS ์๋ฐ์คํฌ๋ฆฝํธ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://dev.to/robsonmuniz16/how-to-make-circular-progress-bar-html-css-javascript-1cl8ํ ์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค