<span id="note">Note: Tested in Chrome / Firefox</span>
<h1>Animated Hexagonal Progress Bar</h1>
<div id="containerpctbox">
<div class="pctbox" data-percent="78">
<svg class="hexa-progress" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" >
<defs>
<linearGradient id="lineargr" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#05a"/>
<stop offset="100%" stop-color="#0a5"/>
</linearGradient>
</defs>
<path fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
<svg class="hexa-progress-bg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" >
<path fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
<span class="percent"><span class="pctamount"></span><span>%</span></span>
</div>
<div class="pctbox" data-percent="48">
<svg class="hexa-progress" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" ><path fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
<svg class="hexa-progress-bg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" >
<path fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
<span class="percent"><span class="pctamount"></span><span>%</span></span>
</div>
<div class="pctbox" data-percent="95">
<svg class="hexa-progress" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" ><path fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
<svg class="hexa-progress-bg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" >
<path fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
<span class="percent"><span class="pctamount"></span><span>%</span></span>
</div>
<div class="pctbox" data-percent="20">
<svg class="hexa-progress" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" ><path fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
<svg class="hexa-progress-bg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" >
<path fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
<span class="percent"><span class="pctamount"></span><span>%</span></span>
</div>
</div>
<button id="randomize">
<span class="cont-svg-btn">
<svg width="100%" height="100%" viewBox="0 0 300 125" preserveAspectRatio="none">
<path d="M290,95C290,106.04599999999999,281.046,115,270,115C270,115,180,115,150,115C120,115,30,115,30,115C18.954,115,10,106,10,95C10,86.285,10,69.125,10,60.5C10,52.875,10,37.726,10,30C10,18.375,18.954,10,30,10C30,10,120,10,150,10C180,10,270,10,270,10C281.046,10,290,18.954,290,30C290,37.25,290,52.875,290,60.5C290,69.125,290,84.5,290,95C290,95,290,95,290,95"></path>
<desc>Created with Snap</desc><defs></defs></svg>
</span>
<span class="svg-btn-text">Random</span>
</button>
<a target="_blank" href="https://twitter.com/alaricweb" id="twitterlink"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165.54 186.25"><defs><style>.cls-1{fill:#fff;stroke:#044db5;stroke-miterlimit:10;}.cls-2{fill:#010002;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M74.55,2.88A15.44,15.44,0,0,1,91,2.88l65.82,38A15.44,15.44,0,0,1,165,55.13v76a15.44,15.44,0,0,1-8.23,14.25L91,183.38a15.44,15.44,0,0,1-16.45,0l-65.82-38A15.44,15.44,0,0,1,.5,131.13v-76A15.44,15.44,0,0,1,8.73,40.88Z"/><path class="cls-2" d="M138.24,58.73a45.45,45.45,0,0,1-13.07,3.58,22.85,22.85,0,0,0,10-12.58,45.88,45.88,0,0,1-14.46,5.53A22.78,22.78,0,0,0,81.94,76,64.61,64.61,0,0,1,35,52.22a22.79,22.79,0,0,0,7,30.38,22.76,22.76,0,0,1-10.31-2.86V80A22.78,22.78,0,0,0,50,102.35a23.05,23.05,0,0,1-6,.8,21.84,21.84,0,0,1-4.28-.42A22.77,22.77,0,0,0,61,118.53a45.66,45.66,0,0,1-28.26,9.73,48.37,48.37,0,0,1-5.43-.31,64.33,64.33,0,0,0,34.89,10.24c41.87,0,64.75-34.68,64.75-64.75l-.08-2.95A45.45,45.45,0,0,0,138.24,58.73Z"/></g></g></svg></a>
@import url('https://fonts.googleapis.com/css?family=Satisfy');
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
#note{
color:#cccccc;
top:10px;
left:10px;
position:fixed;
}
html,body{
background:#05010a;
height:100%;
font-family: 'Open Sans';
}
#twitterlink{
bottom:30px;
right:20px;
position: fixed;
height:40px;
width:40px;
}
#twitterlink .cls-1{
fill:url(#lineargr);
}
h1{
background-image: -webkit-linear-gradient(to right, #0575E6, #00F260);
background-image: linear-gradient(to right, #0575E6, #00F260);
color:transparent;
-webkit-background-clip: text;
background-clip: text;
width: 450px;
font-size:26px;
text-align: center;
display: block;
margin: 0 auto;
margin-top:25px;
font-familly:"Open Sans";
}
.hexa-progress,.hexa-progress-bg{
position:absolute;
width:140px;
overflow: visible;
opacity:0;
stroke-linecap: round;
}
.hexa-progress path{
stroke-width:4px;
stroke: url(#lineargr);
fill:none;
}
.hexa-progress-bg path{
stroke-width:4px;
opacity:0.2;
stroke: url(#lineargr);
fill:none;
}
.percent{
background-image: -webkit-linear-gradient(to right, #0575E6, #00F260);
background-image: linear-gradient(to right, #0575E6, #00F260);
color:transparent;
-webkit-background-clip: text;
background-clip: text;
position:absolute;
font-size:45px;
opacity:0;
font-family: 'Satisfy', cursive;
}
#containerpctbox{
display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-gap: 0px;
align-content: center;
height:300px;
}
.pctbox{
position:relative;
}
#randomize{
background: none;
border: none;
width: calc(200px / 2);
height:calc(83.75px / 2);
left:calc(50% - 50px);
bottom:20px;
outline: none;
position: absolute;
margin: 1em;
padding: 0;
cursor:pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cont-svg-btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.cont-svg-btn path{
fill:none;
stroke-width:4px;
stroke:url(#lineargr);
}
.svg-btn-text{
display: block;
padding: 10px;
text-align: center;
position: relative;
z-index: 100;
font-size: 1.5em;
color: #fff;
font-weight: bold;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: -webkit-linear-gradient(to right, #0575E6, #00F260);
background-image: linear-gradient(to right, #0575E6, #00F260);
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}
@media screen and (max-width: 810px) {
#containerpctbox{
grid-template-columns: 33% 33% 33%;
}
.pctbox:nth-child(4){
display:none;
}
}
@media screen and (max-width: 630px) {
#containerpctbox{
grid-template-columns: 50% 50%;
}
.pctbox:nth-child(3){
display:none;
}
}
@media screen and (max-width: 390px) {
#containerpctbox{
grid-template-columns: 100%;
}
.pctbox:nth-child(2){
display:none;
}
h1{
width:auto;
}
}
TweenMax.set('.hexa-progress,.hexa-progress-bg',{
xPercent:"-50%",
yPercent:"-50%",
left:"50%",
top:"50%",
opacity:1
});
TweenMax.set('.percent',{
xPercent:"-50%",
yPercent:"-50%",
left:"50%",
top:"50%",
marginTop:5,
opacity:1
});
function drawProgress(){
$.each($('.pctbox'),function(index, value){
var endPercent = $(this).data("percent");
var hex = $(this).find('.hexa-progress path');
var chiffre = $(this).find('.pctamount');
var percent = {curvalue:0};
TweenMax.fromTo(percent,2.5,{opacity:0},{opacity:1,delay:0.5,curvalue:endPercent,roundProps:"curvalue",ease: Power4.easeOut,onUpdate:function(){
chiffre.text(percent.curvalue);
}});
TweenMax.fromTo(hex,2.5,{drawSVG:false},{delay:0.5,ease: Power4.easeOut,
drawSVG:"0% "+endPercent+"%"
});
});
}
drawProgress();
$('#randomize').mouseup(function(){
TweenMax.to('.hexa-progress path',0.4,{drawSVG:false, onComplete:function(){
$.each($('.pctbox'),function(){
$(this).data('percent',Math.random()*100);
});
drawProgress();
}});
TweenMax.to('#randomize',0.4,{scale:1,transformOrigin:"50% 50%"});
}).mousedown(function(){
TweenMax.to('#randomize',0.4,{scale:0.95,transformOrigin:"50% 50%"});
});
TweenMax.to('#twitterlink,#randomize',1,{scale:1.2,repeat:-1,transformOrigin:"50% 50%",yoyo:true});
This Pen doesn't use any external CSS resources.