Burada HTML, CSS ve JavaScript(jQuery tercih edildi) ile yapılmış bir basit progress bar/ilerleme çubuğu göreceksiniz.
Yapılışı oldukça basit olan bu ilerleme çubuğunu ihtiyaçlarınıza göre projelerinizde kullanabilirsiniz, kaynak kodları aşağıdaki gibidir:
HTML
<div class="container">
<div class="box">
<div class="chart" data-percent="90">90%</div>
<h2>HTML</h2>
</div>
<div class="box">
<div class="chart" data-percent="72">72%</div>
<h2>CSS</h2>
</div>
<div class="box">
<div class="chart" data-percent="81">81%</div>
<h2>JAVASCRIPT</h2>
</div>
</div>
CSS
body{
margin: 0;
padding: 0;
font-family: sans-serif;
display: flex;
justify-content: center;
height: 100vh;
background: #0d0c2d;
}
.container{
display: grid;
grid-template-columns: repeat(1, 160px);
grid-gap: 80px;
background: #0d0c2d;
box-shadow: -5px -5px 8px rgba(94, 104, 121, 0.288),
4px 4px 6px rgba(94, 104, 121, 0.288);
padding: 60px;
margin: auto 0;
}
@media (min-width: 420px) and (max-width: 659px){
.container{
grid-template-columns: repeat(2, 160px);
}
}
@media (min-width: 660px) and (max-width: 899px){
.container{
grid-template-columns: repeat(3, 160px);
}
}
@media (min-width: 900px){
.container{
grid-template-columns: repeat(3, 160px);
}
}
.container .box{
width: 100%;
}
.container .box h2{
display: block;
text-align: center;
color: #fff;
}
.container .box .chart{
position: relative;
width: 100%;
height: 100%;
text-align: center;
font-size: 40px;
line-height: 160px;
height: 160px;
color: #fff;
}
.container .box canvas{
position: absolute;
top: 0;
left: 0;
width: 100%;
width: 100%;
}
JavaScript
$(function (){
$(".chart").easyPieChart({
size: 160,
barColor: "#36e617",
scaleLength: 0,
lineWidth: 15,
trackColor: "#525151",
lineCap: "circle",
animate: 2000
});
});
Bu uygulamada, 3.6.0/jquery.js ve 2.1.6/jquery.easypiechart.js kullanılmıştır.
Kolay gelsin.