Skip to content

Instantly share code, notes, and snippets.

@kbahr
Created February 23, 2020 03:42
Show Gist options
  • Save kbahr/0d7090b96d51542ecbbc1598b2f98730 to your computer and use it in GitHub Desktop.
Save kbahr/0d7090b96d51542ecbbc1598b2f98730 to your computer and use it in GitHub Desktop.
HTML, CSS, and Javascript for hexagonal progress bars with the HEX color gradient
<!-- HTML for hex progress bar -->
<div id="wrapper" class="center">
<svg class="hex-progress noselect" data-progress="87.5" x="0px" y="0px" viewBox="0 0 776 628">
<path class="track" d="M723 314L543 625.77 183 625.77 3 314 183 2.23 543 2.23 723 314z" ></path>
<path class="fill" d="M723 314L543 625.77 183 625.77 3 314 183 2.23 543 2.23 723 314z" stroke="url(#cl1)"></path>
<text class="value" x="50%" y="61%">0%</text>
<text class="text" x="50%" y="122%">Staked</text>
</svg>
</div>
<svg width="0" height="0">
<defs>
<linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#F0E618"/>
<stop offset="100%" stop-color="#EB0FF6"/>
</linearGradient>
</defs>
</svg>
/*===== The CSS =====*/
.hex-progress{
width: 200px;
height: 240px;
}
.hex-progress .track, .hex-progress .fill{
fill: rgba(0, 0, 0, 0);
stroke-width: 30;
transform: translate(290px, 800px)rotate(-120deg);
}
.hex-progress .track{
stroke: rgb(56, 71, 83);
}
.hex-progress .fill {
stroke-linecap: round;
stroke-dasharray: 2160;
stroke-dashoffset: 2160;
transition: stroke-dashoffset 1s;
}
.hex-progress .value, .hex-progress .text {
font-family: 'Open Sans';
fill: rgb(255, 255, 255);
text-anchor: middle;
}
.hex-progress .value {
font-size: 180px;
}
.hex-progress .text {
font-size: 120px;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
/* JAVASCRIIIIIIIPT */
var forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]);
}
};
window.onload = function(){
var max = 2160;
forEach(document.querySelectorAll('.hex-progress'), function (index, value) {
percent = value.getAttribute('data-progress');
value.querySelector('.fill').setAttribute('style', 'stroke-dashoffset: ' + ((100 - percent) / 100) * max);
value.querySelector('.value').innerHTML = percent + '%';
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment