<div class='container'>
<div class='progress-bar'>
<div class='progress-now'></div>
</div>
<div class='progress-bar'>
<div class='progress-now bottom'></div>
</div>
</div>
<div class='container'>
<div class='progress-bar-vertical'>
<div class='progress-now-vertical'></div>
</div>
<div class='progress-bar-vertical'>
<div class='progress-now-vertical right'></div>
</div>
</div>
.progress-bar {
position: relative;
display: inline-block;
height: 400px;
width: 200px;
background: linear-gradient(to bottom, #8fe4bf 99.9%, transparent 99.9%), radial-gradient(circle at 50% 50%, #8fe4bf 25%, transparent 30%);
background-position: 50% 0%, 50% 0%;
background-size: 5px 100%, 50px 50px;
/* 5px is the thickness of the bar, 50px is 1/8th of the height */
background-repeat: no-repeat, repeat-y;
}
.progress-now {
position: absolute;
width: 100%;
background: linear-gradient(to bottom, #00b164 99.9%, transparent 99.9%), radial-gradient(circle at 50% 50%, #00b164 25%, transparent 30%);
background-position: 50% 0%, 50% 0%;
background-size: 5px 100%, 50px 50px;
background-repeat: no-repeat, repeat-y;
z-index: 1;
}
.progress-now.bottom {
bottom: 0px;
background-position: 50% 100%, 50% 100%;
}
.progress-bar-vertical {
position: relative;
display: inline-block;
height: 200px;
width: 400px;
background: linear-gradient(to right, #8fe4bf 99.9%, transparent 99.9%), radial-gradient(circle at 50% 50%, #8fe4bf 25%, transparent 30%);
background-position: 0% 50%, 0% 50%;
background-size: 100% 5px, 50px 50px;
/* 5px is the thickness of the bar, 50px is 1/8th of the height */
background-repeat: no-repeat, repeat-x;
}
.progress-now-vertical {
position: absolute;
height: 100%;
background: linear-gradient(to right, #00b164 99.9%, transparent 99.9%), radial-gradient(circle at 50% 50%, #00b164 25%, transparent 30%);
background-position: 0% 50%, 0% 50%;
background-size: 100% 5px, 50px 50px;
background-repeat: no-repeat, repeat-x;
z-index: 1;
}
.progress-now-vertical.right {
right: 0px;
background-position: 100% 50%, 100% 50%;
}
.container{
float: left;
width: 425px;
height: 425px;
padding: 10px;
margin: 4px;
border: 1px solid;
text-align: center;
}
window.onload = function() {
var val = 0,
progress = 0;
function progressBar() {
val += 0.005;
progress = (val * 50 > 400) ? 400 : val * 50; /* 50 is 1/8th of height, 400 is height */
$('.progress-now').attr('style', 'height: ' + progress + 'px');
$('.progress-now-vertical').attr('style', 'width: ' + progress + 'px');
if (val > 8) val = 0;
anim = window.requestAnimationFrame(progressBar);
}
progressBar();
}
This Pen doesn't use any external CSS resources.