How to reduce size of the loader?

I want to reduce size of a loader viz in the snippet.

What I want is to reduce its size around 10-20% proportionately.

Please guide me into this so I can do it by myself in future.

Here's my code:

$(document).ready(function() {
  var progressbar = $('#progress_bar');
  max = parseInt(progressbar.attr('max'), 10);
  time = (1000 / max) * 2;
  value = progressbar.val();

  var loading = function() {
    var $ppc = $('.progress-pie-chart');
    if (value >= max) {
      value = 0;
      $ppc.removeClass('gt-50');
    } else {
      value += 1;
    }

    addValue = progressbar.val(value);

    $('.progress-value').html(value + '%');
    var deg = 360 * value / 10;
    if (value > 5) {
      $ppc.addClass('gt-50');
    }

    $('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
    $('.ppc-ball').css('transform', 'rotate(' + deg + 'deg)');
    $('.ppc-percents span').html(value + '');
  };

  setInterval(loading, time);




});

/* Pie Chart */

.progress-pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #024369;
  position: relative;
}
.progress-pie-chart.gt-50 {
  background: red;
}
.ppc-progress {
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 200px, 200px, 100px);
}
.gt-50 .ppc-progress {
  clip: rect(0, 100px, 200px, 0);
}
.ppc-progress-fill {
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 100px, 200px, 0);
  background: red;
}
.ppc-ball {
  position: absolute;
  width: 200px;
  height: 200px;
}
.ppc-ball:after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(82, 180, 237, 1);
  background: -moz-radial-gradient(center, ellipse cover, rgba(82, 180, 237, 1) 0%, rgba(7, 120, 219, 0) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(82, 180, 237, 1)), color-stop(100%, rgba(7, 120, 219, 0)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(82, 180, 237, 1) 0%, rgba(7, 120, 219, 0) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(82, 180, 237, 1) 0%, rgba(7, 120, 219, 0) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(82, 180, 237, 1) 0%, rgba(7, 120, 219, 0) 100%);
  background: radial-gradient(ellipse at center, rgba(82, 180, 237, 1) 0%, rgba(7, 120, 219, 0) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#52b4ed', endColorstr='#0778db', GradientType=1);
  top: -7px;
  left: 85px;
}
.gt-50 .ppc-progress-fill {
  clip: rect(0, 200px, 200px, 100px);
  background: #024369;
}
.ppc-percents {
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 173.91304px / 2);
  top: calc(50% - 173.91304px / 2);
  width: 173.91304px;
  height: 173.91304px;
  background: #052b4e;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #fc7114;
  text-shadow: 0px 0px 15px rgba(248, 94, 41, 1);
}
.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}
.progress-pie-chart {
  margin: 50px auto 0;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="myCarousel" class="carousel slide" data-interval="false" data-ride="carousel">

  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
      <div class="container">
        <div class="carousel-caption">
          <h3>First slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h3>Third slide label</h3>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<hr class="transition-timer-carousel-progress-bar" />

<div style="margin:0 auto;">

  <div class="bar_container">
    <div id="main_container">
      <div id="pbar" class="progress-pie-chart" data-percent="0">
        <div class="ppc-progress">
          <div class="ppc-progress-fill"></div>
        </div>
        <div class="ppc-percents">
          <div class="pcc-percents-wrapper">
            <span>0</span>
          </div>
        </div>
        <div class="ppc-ball"></div>
      </div>
      <progress style="display: none" id="progress_bar" value="0" max="10"></progress>
    </div>
  </div>
</div>

Solution

Changing all the 200px's and 100px's and the other pixel sizes in the CSS works just fine. See the snippet, I made it half the size here.

$(document).ready(function() {
  var progressbar = $('#progress_bar');
  max = parseInt(progressbar.attr('max'), 10);
  time = (1000 / max) * 2;
  value = progressbar.val();

  var loading = function() {
    var $ppc = $('.progress-pie-chart');
    if (value >= max) {
      value = 0;
      $ppc.removeClass('gt-50');
    } else {
      value += 1;
    }

    addValue = progressbar.val(value);

    $('.progress-value').html(value + '%');
    var deg = 360 * value / 10;
    if (value > 5) {
      $ppc.addClass('gt-50');
    }

    $('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
    $('.ppc-ball').css('transform', 'rotate(' + deg + 'deg)');
    $('.ppc-percents span').html(value + '');
  };

  setInterval(loading, time);




});

/* Pie Chart */

.progress-pie-chart {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #024369;
  position: relative;
}
.progress-pie-chart.gt-50 {
  background: red;
}
.ppc-progress {
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  width: 100px;
  height: 100px;
  clip: rect(0, 100px, 100px, 50px);
}
.gt-50 .ppc-progress {
  clip: rect(0, 50px, 100px, 0);
}
.ppc-progress-fill {
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  width: 100px;
  height: 100px;
  clip: rect(0, 50px, 100px, 0);
  background: red;
}
.ppc-ball {
  position: absolute;
  width: 100px;
  height: 100px;
}
.ppc-ball:after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(82, 180, 237, 1);
  background: -moz-radial-gradient(center, ellipse cover, rgba(82, 180, 237, 1) 0%, rgba(7, 120, 219, 0) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(82, 180, 237, 1)), color-stop(100%, rgba(7, 120, 219, 0)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(82, 180, 237, 1) 0%, rgba(7, 120, 219, 0) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(82, 180, 237, 1) 0%, rgba(7, 120, 219, 0) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(82, 180, 237, 1) 0%, rgba(7, 120, 219, 0) 100%);
  background: radial-gradient(ellipse at center, rgba(82, 180, 237, 1) 0%, rgba(7, 120, 219, 0) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#52b4ed', endColorstr='#0778db', GradientType=1);
  top: -7px;
  left: 40px;
}
.gt-50 .ppc-progress-fill {
  clip: rect(0, 100px, 100px, 50px);
  background: #024369;
}
.ppc-percents {
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 73.91304px / 2);
  top: calc(50% - 73.91304px / 2);
  width: 73.91304px;
  height: 73.91304px;
  background: #052b4e;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #fc7114;
  text-shadow: 0px 0px 15px rgba(248, 94, 41, 1);
}
.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}
.progress-pie-chart {
  margin: 50px auto 0;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="myCarousel" class="carousel slide" data-interval="false" data-ride="carousel">

  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
      <div class="container">
        <div class="carousel-caption">
          <h3>First slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h3>Third slide label</h3>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<hr class="transition-timer-carousel-progress-bar" />

<div style="margin:0 auto;">

  <div class="bar_container">
    <div id="main_container">
      <div id="pbar" class="progress-pie-chart" data-percent="0">
        <div class="ppc-progress">
          <div class="ppc-progress-fill"></div>
        </div>
        <div class="ppc-percents">
          <div class="pcc-percents-wrapper">
            <span>0</span>
          </div>
        </div>
        <div class="ppc-ball"></div>
      </div>
      <progress style="display: none" id="progress_bar" value="0" max="10"></progress>
    </div>
  </div>
</div>