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>
