Kategoriler
Kodlama

HTML, CSS ve JavaScript ile dairesel progress bar

HTML, CSS ve JavaScript kullanarak yapılmış basit bir dairesel progress bar.

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.