CSS Circle Progress Bar
The Following Css Circle Progress Bar source code will make your website attractive. Copy the code and paste it into your website.
 |
| CSS Circle Progress Bar |
HTML PART
<body>
<section>
<div class="container">
<div class="card">
<div class="box">
<div>
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70"></circle>
</svg>
<div class="number">
<h2>90<span>%</span></h2>
</div>
</div>
</div>
</div>
<div class="text">Html</div>
</div>
<div class="card">
<div class="box">
<div>
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70"></circle>
</svg>
<div class="number">
<h2>82<span>%</span></h2>
</div>
</div>
</div>
</div>
<div class="text">CSS</div>
</div>
<div class="card">
<div class="box">
<div>
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70"></circle>
</svg>
<div class="number">
<h2>65<span>%</span></h2>
</div>
</div>
</div>
</div>
<div class="text">Javascript</div>
</div>
</div>
</section>
</body>
CSS PART
1 CSS code.
*{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
2 CSS code.
section
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 40px 0;
min-height: 100vh;
background: #350048;
}
3 CSS code.
section::before
{
content: ' ';
position: absolute;
top: 45%;
left: 0;
width: 100%;
height: 50px;
background: #bd00ff;
}
4 CSS code.
.container
{
width: 900px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
5 CSS code.
.container .card
{
position: relative;
width: 250px;
height: 300px;
text-align: center;
z-index: 10;
margin: 20px 20px 60px;
transition: 0.5s;
}
6 CSS code.
.container .card .box
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
7 CSS code.
.percent
{
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
z-index: 100;
}
8 CSS code.
.percent .number
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
9 code.
.percent .number h2
{
color: #fff;
font-weight: 700;
font-size: 50px;
}
10 CSS code.
.percent .number h2 span
{
font-size: 24px;
}
11 CSS code.
.text
{
position: absolute;
bottom: -42px;
left: 50%;
transform: translateX(-50%);
text-align: center;
padding: 30px 20px 10px;
background: #f00;
border-radius: 10px;
font-weight: 800;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
z-index: 1;
pointer-events: none;
transition: bottom 0.5s, z-index 0s, transform 0.5s, padding 0.5s;
transition-delay: 0.5s,0.5s,0s,0.5s;
color: #fff;
}
12 CSS code.
.card:hover .text
{
transition-delay: 0s,0.5s,0.5s,0s;
bottom: -70px;
z-index: 11;
transform: translateX(-50%) translateY(-50px);
padding: 10px 20px 10px;
}
13 CSS code.
.card:nth-child(1) .text
{
background: #ff0461;
}
.card:nth-child(2) .text
{
background: #2bd2ff;
}
.card:nth-child(3) .text
{
background: #18d539;
}
14 CSS code.
svg
{
position: relative;
width: 150px;
height: 150px;
}
15 CSS code.
svg circle
{
width: 100%;
height: 100%;
fill: none;
stroke-width: 10;
stroke: rgba(255, 255, 255, 0.05);
transform: translate(5px,5px);
stroke-linecap: round;
}
16 CSS code.
svg circle:nth-child(2)
{
stroke: #fff;
stroke-dasharray: 440px;
stroke-dashoffset: 440px;
}
17 CSS code.
.card:nth-child(1) svg circle:nth-child(2)
{
stroke-dashoffset: calc(440px - (440px * 90) / 100);
}
.card:nth-child(2) svg circle:nth-child(2)
{
stroke-dashoffset: calc(440px - (440px * 82) / 100);
}
.card:nth-child(3) svg circle:nth-child(2)
{
stroke-dashoffset: calc(440px - (440px * 65) / 100);
}
.png)
.png)
0 Comments