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.

wolkanca.com’da HTML, CSS ve JavaScript ile dairesel progress bar veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, HTML, CSS ve JavaScript ile dairesel progress bar için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.