104 lines
2.6 KiB
Plaintext
104 lines
2.6 KiB
Plaintext
<div class="np-progress-ring-wrapper">
|
|
<svg
|
|
class="progress-ring"
|
|
width="{{ size }}"
|
|
height="{{ size }}">
|
|
<circle
|
|
class="progress-ring__circle circle-bg "
|
|
stroke="{{ stroke_color_NS }}"
|
|
stroke-width="{{ stroke_width }}"
|
|
fill="transparent"
|
|
r="{{ r }}"
|
|
cx="{{ cx }}"
|
|
cy="{{ cy }}"/>
|
|
<circle
|
|
class="progress-ring__circle circle-IP"
|
|
stroke="{{ stroke_color_IP }}"
|
|
stroke-width="{{ stroke_width }}"
|
|
fill="transparent"
|
|
r="{{ r }}"
|
|
cx="{{ cx }}"
|
|
cy="{{ cy }}"/>
|
|
<circle
|
|
class="progress-ring__circle circle-CM"
|
|
stroke="{{ stroke_color_CM }}"
|
|
stroke-width="{{ stroke_width }}"
|
|
fill="transparent"
|
|
r="{{ r }}"
|
|
cx="{{ cx }}"
|
|
cy="{{ cy }}"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
var circleIP = document.getElementsByClassName("circle-IP")[0];
|
|
var circleCM = document.getElementsByClassName("circle-CM")[0];
|
|
var radius = circleIP.r.baseVal.value;
|
|
var circumference = radius * 2 * Math.PI;
|
|
|
|
circleIP.style.strokeDasharray = `${circumference} ${circumference}`;
|
|
circleIP.style.strokeDashoffset = `${circumference}`;
|
|
|
|
circleCM.style.strokeDasharray = `${circumference} ${circumference}`;
|
|
circleCM.style.strokeDashoffset = `${circumference}`;
|
|
|
|
function setProgress(circleNodeName, percent) {
|
|
let offset = circumference - percent * circumference;
|
|
|
|
if(circleNodeName == 'circleIP'){
|
|
circleIP.style.strokeDashoffset = offset;
|
|
} else {
|
|
circleCM.style.strokeDashoffset = offset;
|
|
}
|
|
}
|
|
setProgress('circleIP', '{{ countIP | divided_by: total }}')
|
|
setProgress('circleCM', '{{ countCM | divided_by: total }}')
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.circle-IP{
|
|
transform: scale(-1, 1);
|
|
}
|
|
|
|
.np-progress-ring-wrapper {
|
|
flex: 0;
|
|
flex-direction: column;
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 1.5rem 1rem 1rem 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.progress-ring__circle {
|
|
transition: stroke-dashoffset 0.35s;
|
|
transform: rotate(-90deg);
|
|
transform-origin: center;
|
|
}
|
|
|
|
.np-progress-circle-label {
|
|
color:#fff;
|
|
text-transform: uppercase;
|
|
font-size:0.875rem;
|
|
margin-top:1rem;
|
|
}
|
|
.bqUfwS{
|
|
display:none !important;
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.np-progress-ring-wrapper {
|
|
padding: 1.5rem 0.4rem 1rem 0.4rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width:1170px) {
|
|
.progress-ring text {
|
|
font-size:2.5rem;
|
|
}
|
|
.np-progress-ring-wrapper {
|
|
padding: 1.5rem 1rem 1rem 1rem;
|
|
}
|
|
}
|
|
</style> |