How Can I Change size of the circles?

Question

I saw a code and i was trying to modify the size of the circles, but i don't know whither i can change it using js or css .Is there any way to change it ?

The full code is from: https://codepen.io/XTn-25/pen/NWqeBaz

hesr is js code:

/**
 * index.js
 * - All our useful JS goes here, awesome!
 Maruf-Al Bashir Reza
 */

console.log("JavaScript is amazing!");
$(document).ready(function($) {
  function animateElements() {
    $('.progressbar').each(function() {
      var elementPos = $(this).offset().top;
      var topOfWindow = $(window).scrollTop();
      var percent = $(this).find('.circle').attr('data-percent');
      var percentage = parseInt(percent, 10) / parseInt(100, 10);
      var animate = $(this).data('animate');
      if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
        $(this).data('animate', true);
        $(this).find('.circle').circleProgress({
          startAngle: -Math.PI / 2,
          value: percent / 100,
          thickness: 14,
          fill: {
            color: '#1B58B8'
          }
        }).on('circle-animation-progress', function(event, progress, stepValue) {
          $(this).find('div').text((stepValue * 100).toFixed(1) + "%");
        }).stop();
      }
    });
  }

  // Show animated elements
  animateElements();
  $(window).scroll(animateElements);
});

Answer 1

It seems like it's using this as a dependency. So in order to change the circle size, you need to add size property which defaults to 100:

    $(this).find('.circle').circleProgress({
      startAngle: -Math.PI / 2,
      value: percent / 100,
      thickness: 14,
      fill: {
        color: '#1B58B8'
      },
      size: 300 // <-- here, the size changes the circle radius
    })

and in order to stop overlapping the circles, you also need to modify the CSS a little bit by increasing the width of the .progressbar element:

.progressbar {
  display: inline-block;
  width: 300px;
  margin: 25px;
}

So the full example would look like this:

 /** * index.js * - All our useful JS goes here, awesome! Maruf-Al Bashir Reza */ console.log("JavaScript is amazing!"); $(document).ready(function($) { function animateElements() { $('.progressbar').each(function() { var elementPos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); var percent = $(this).find('.circle').attr('data-percent'); var percentage = parseInt(percent, 10) / parseInt(100, 10); var animate = $(this).data('animate'); if (elementPos < topOfWindow + $(window).height() - 30 && !animate) { $(this).data('animate', true); $(this).find('.circle').circleProgress({ startAngle: -Math.PI / 2, value: percent / 100, thickness: 14, fill: { color: '#1B58B8' }, size: 300 }).on('circle-animation-progress', function(event, progress, stepValue) { $(this).find('div').text((stepValue * 100).toFixed(1) + "%"); }).stop(); } }); } // Show animated elements animateElements(); $(window).scroll(animateElements); });

 /** * index.scss * - Add any styles you want here! */ body { background: #f5f5f5; } .progressbar { display: inline-block; width: 300px; margin: 25px; } .circle { width: 100%; margin: 0 auto; margin-top: 10px; display: inline-block; position: relative; text-align: center; } .circle canvas { vertical-align: middle; } .circle div { position: absolute; top: 30px; left: 0; width: 100%; text-align: center; line-height: 40px; font-size: 20px; } .circle strong i { font-style: normal; font-size: 0.6em; font-weight: normal; } .circle span { display: block; color: #aaa; margin-top: 12px; }

 <!DOCTYPE html> <html lang="en"> <head> <!-- Meta --> <meta charset="UTF-8" /> <title>My New Pen!</title> <!-- Styles --> <link rel="stylesheet" href="styles/index.processed.css"> </head> <body> <h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1> <div style="width:100%;height:800px;">↓ Scroll down ↓</div> <h3>Title (Placeholder)</h3> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="100"> <div></div> <p>Testing</p> </div> </div> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="30.5"> <div></div> <p>Testing</p> </div> </div> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="77"> <div></div> <p>Testing</p> </div> </div> <div class="progressbar" data-animate="false"> <div class="circle" data-percent="49"> <div></div> <p>Testing</p> </div> </div> <div style="width:100%;height:500px;"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script> <script src="scripts/index.js"></script> </body> </html>

How Can I Change size of the circles?

Question

1 answers

solution1
1 ACCPTED 2020-03-28 15:33:08

How Can I Change size of the circles?

Question

1 answers

solution1 1 ACCPTED 2020-03-28 15:33:08

solution1
1 ACCPTED 2020-03-28 15:33:08