Increase size of pie charts (width and height) created by progressbar.js

Question

I am using https://github.com/yxfanxiao/jQuery-plugin-progressbar to draw animated pie charts, using the exact codes below:

JS:

;
(function ($) {
    $.fn.loading = function () { 



        var DEFAULTS = {
            backgroundColor: '#4b86db',
            progressColor: '#b3cef6',
            percent: 75,
            duration: 2000
        };  

        $(this).each(function () {
            var $target  = $(this);

            var opts = {
            backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
            progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
            percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
            duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
            };
            // console.log(opts);

            $target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + opts.percent + '%</span></div>');

            $target.find('.background').css('background-color', opts.backgroundColor);
            $target.find('.left').css('background-color', opts.backgroundColor);
            $target.find('.rotate').css('background-color', opts.progressColor);
            $target.find('.right').css('background-color', opts.progressColor);

            var $rotate = $target.find('.rotate');
            //$rotate.set(0);
            setTimeout(function () {    
                $rotate.css({
                    'transition': 'transform ' + opts.duration + 'ms linear',
                    'transform': 'rotate(' + opts.percent * -3.6 + 'deg)'
                });
            },1);       

            if (opts.percent > 50) {
                var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
                var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';  
                $target.find('.left').css({
                    animation: animationRight,
                    opacity: 1
                });
                $target.find('.right').css({
                    animation: animationLeft,
                    opacity: 0
                });
            } 
            else
            {
                var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
                var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';  
                $target.find('.left').css({
                    animation: animationRight,
                    opacity: 0
                });
                $target.find('.right').css({
                    animation: animationLeft,
                    opacity: 1
                });
            }
        });
    }
})(jQuery);

CSS:

.position {
  float: left;
  margin: 100px 50px;
}

.progress-bar {
  position: relative;
  height: 100px;
  width: 100px;
}
.progress-bar div {
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.progress-bar div span {
  position: absolute;
  font-family: Arial;
  font-size: 25px;
  line-height: 75px;
  height: 75px;
  width: 75px;
  left: 12.5px;
  top: 12.5px;
  text-align: center;
  border-radius: 50%;
  background-color: white;
}
.progress-bar .background {
  background-color: #b3cef6;
}
.progress-bar .rotate {
  clip: rect(0 50px 100px 0);
  background-color: #4b86db;
}
.progress-bar .left {
  clip: rect(0 50px 100px 0);
  opacity: 1;
  background-color: #b3cef6;
}
.progress-bar .right {
  clip: rect(0 50px 100px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Progress Bar</title>
    <link rel="stylesheet" href="jQuery-plugin-progressbar.css">
    <script src="jquery-1.11.3.js"></script>
    <script src="jQuery-plugin-progressbar.js"></script>
</head>
<body>
    <div class="progress-bar position" data-percent="30" data-duration="1000" data-color="#4b86db,#b3cef6"></div>
    <div class="progress-bar position" data-percent="60" data-duration="1000" data-color="yellow,#ccc"></div>
    <div class="progress-bar position" data-percent="84" data-color="#12b321,#a456b1"></div>
    <input type="submit" value="Draw">
    <script>
        $(".progress-bar").loading();
        $('input').on('click', function () {
             $(".progress-bar").loading();
        });
    </script>
</body>
</html>

The output is like below:

What I need to do is to increase the size (width and height) of the pie charts. Changing width and height values only did not work, the other values needs to be changed accordingly as well it seems like, but couldn't manage to show the graph correctly still.

They are 100X100 now, how to make them 200X200? Any help would be appreciated!

Thanks!

Answer 1

try this ?

.position {
  float: left;
  margin: 100px 50px;
}

.progress-bar {
  position: relative;
  height: 200px;
  width: 200px;
}
.progress-bar div {
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
.progress-bar div span {
  position: absolute;
  font-family: Arial;
  font-size: 50px;
  line-height: 150px;
  height: 150px;
  width: 150px;
  left: 25px;
  top: 25px;
  text-align: center;
  border-radius: 50%;
  background-color: white;
}
.progress-bar .background {
  background-color: #b3cef6;
}
.progress-bar .rotate {
  clip: rect(0 100px 200px 0);
  background-color: #4b86db;
}
.progress-bar .left {
  clip: rect(0 100px 200px 0);
  opacity: 1;
  background-color: #b3cef6;
}
.progress-bar .right {
  clip: rect(0 100px 200px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Increase size of pie charts (width and height) created by progressbar.js

Question

1 answers

solution1
1 ACCPTED 2019-04-09 21:15:11

Increase size of pie charts (width and height) created by progressbar.js

Question

1 answers

solution1 1 ACCPTED 2019-04-09 21:15:11

solution1
1 ACCPTED 2019-04-09 21:15:11