How to place canvas circular progress bar in grid? - css

Question

I am trying to use this Codepen to create inside each section of my grid container on the profile page separate progress circles, but I get only one visible circle, the others are just empty squares without progress circles.
Could someone please give me a clue what went wrong? I tried to re-name classes and tweaked the code, but it didn't work.
Part of html:
<div class="grid-container">
<div class="counter" data-cp-percentage="75" data-cp-color="#00bfeb"></div>
<div class="counter" data-cp-percentage="65" data-cp-color="#EA4C89"></div>
<div class="counter" data-cp-percentage="35" data-cp-color="#FF675B"></div>
<div class="counter" data-cp-percentage="44" data-cp-color="#FF9900"></div>
</div>
CSS
.profile_intro {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
margin-top: 0px;
width: 100%;
height: 20%;
}
.profilepic-img {
vertical-align: center;
border-radius: 100px;
width: 100px;
height: 100px;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.userinfo {
margin: auto;
width: 50%;
padding: 5px;
text-align: center;
}
.useremail {
margin-top: 5%;
}
table {
border: 2px solid #cccccc;
width: 80%;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
text-align: center;
color: grey;
}
th,
td {
padding: 5px;
text-align: center;
}
th {
font-size: 18px;
}
.grid-container {
display: grid;
/*important!
justify-content: space-evenly;
grid-template-columns: auto auto; /*important!!
/* grid-template-columns: 50px 50px; /*Make the grid smaller than the container*/
*/ grid-gap: 10px;
background-color: #f1eee3;
padding: 10px;
align-content: center;
left: 0px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
/* padding: 10px 0; */
font-size: 3vw;
border-radius: 25px;
background: #faf8f4;
width: 35vw;
height: 35vw;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
color: #383e3f;
text-decoration-style: solid;
}
/*progress Bar */
h1 {
background: rgba(255, 255, 255, 0.8);
box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.2);
border-bottom: 3px solid #00bfeb;
font-size: calc(1em + 1vmax);
}
.counter {
display: -webkit-inline-box;
display: inline-flex;
cursor: pointer;
width: 300px;
height: 300px;
max-width: 100%;
position: relative;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
font-size: calc(1em + 1vmin);
-webkit-transition: height .2s ease-in-out;
transition: height .2s ease-in-out;
background: #fff;
border-radius: 50%;
box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.2);
margin: 1em 0;
}
.percentage {
position: absolute;
text-align: center;
top: 50%;
left: 0;
right: 0;
vertical-align: middle;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
Javascript
document.addEventListener("DOMContentLoaded", function() {
var circleProgress = (function(selector) {
var wrapper = document.querySelectorAll(selector);
Array.prototype.forEach.call(wrapper, function(wrapper, i) {
var wrapperWidth,
wrapperHeight,
percent,
innerHTML,
context,
lineWidth,
centerX,
centerY,
radius,
newPercent,
speed,
from,
to,
duration,
start,
strokeStyle,
text;
var getValues = function() {
wrapperWidth = parseInt(window.getComputedStyle(wrapper).width);
wrapperHeight = wrapperWidth;
percent = wrapper.getAttribute('data-cp-percentage');
innerHTML = '<span class="percentage"><strong>' + percent +
'</strong> %</span><canvas class="circleProgressCanvas"
width="' + (wrapperWidth * 2) + '" height="' + wrapperHeight *
2 + '"></canvas>';
wrapper.innerHTML = innerHTML;
text = wrapper.querySelector(".percentage");
canvas = wrapper.querySelector(".circleProgressCanvas");
wrapper.style.height = canvas.style.width = canvas.style.height
= wrapperWidth + "px";
context = canvas.getContext('2d');
centerX = canvas.width / 2;
centerY = canvas.height / 2;
newPercent = 0;
speed = 1;
from = 0;
to = percent;
duration = 1000;
lineWidth = 25;
radius = canvas.width / 2 - lineWidth;
strokeStyle = wrapper.getAttribute('data-cp-color');
start = new Date().getTime();
};
function animate() {
requestAnimationFrame(animate);
var time = new Date().getTime() - start;
if (time <= duration) {
var x = easeInOutQuart(time, from, to - from, duration);
newPercent = x;
text.innerHTML = Math.round(newPercent) + " %";
drawArc();
}
}
function drawArc() {
var circleStart = 1.5 * Math.PI;
var circleEnd = circleStart + (newPercent / 50) * Math.PI;
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(centerX, centerY, radius, circleStart, 4 * Math.PI,
false);
context.lineWidth = lineWidth;
context.strokeStyle = "#ddd";
context.stroke();
context.beginPath();
context.arc(centerX, centerY, radius, circleStart, circleEnd,
false);
context.lineWidth = lineWidth;
context.strokeStyle = strokeStyle;
context.stroke();
}
var update = function() {
getValues();
animate();
}
update();
var btnUpdate = document.querySelectorAll(".btn-update")[0];
btnUpdate.addEventListener("click", function() {
wrapper.setAttribute("data-cp-percentage",
Math.round(getRandom(5, 95)));
update();
});
wrapper.addEventListener("click", function() {
update();
});
var resizeTimer;
window.addEventListener("resize", function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
clearTimeout(resizeTimer);
start = new Date().getTime();
update();
}, 250);
});
});
function easeInOutQuart(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
});
circleProgress('.counter');
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
});

Answer 1

Found the bug: I didn't have in my HTML some elements that had been mentioned in JavaScript. Changed names of classes and it works fine at the moment. Thank you all!