JSFiddle - React, Tailwind, and code Playground

by evilbloodydemon

HAML

.progress
    %input.js--progress__data-month(type="hidden" value="120")/
    %input.js--progress__data-today(type="hidden" value="30")/
    %input.js--progress__data-total(type="hidden" value="180")/
    %svg.progress__bar(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 280")
        %path.progress__track(stroke="#686f7d" d="M 21.685,202.90856 C 11.386,183.5396 6,161.93665 6,139.9997 6,65.993866 65.994,6 140,6 c 74.006,0 134,59.993866 134,133.9997 0,74.00583 -59.994,133.9997 -134,133.9997")
        %path.progress__thumb.progress__thumb_red(stroke-dashoffset="107.033" d="M 21.685,202.90856 C 11.386,183.5396 6,161.93665 6,139.9997 6,65.993866 65.994,6 140,6 c 74.006,0 134,59.993866 134,133.9997 0,74.00583 -59.994,133.9997 -134,133.9997")
        %path.progress__thumb.progress__thumb_blue(stroke-dashoffset="307.033" d="M 21.685,202.90856 C 11.386,183.5396 6,161.93665 6,139.9997 6,65.993866 65.994,6 140,6 c 74.006,0 134,59.993866 134,133.9997 0,74.00583 -59.994,133.9997 -134,133.9997")


// stroke-dasharray - что-то типа border-style из CSS, если указано одно значение, то длина штриха(1) равна длине пробела(2) пунктирной линии
// stroke-dashoffset - сдвиг stroke-dasharray, значение 0 отображает штриховку(1), значение равное stroke-dasharray отображает пробел(2)

// %path.progress__thumb.progress__thumb_red(stroke-dashoffset="107.033" stroke-dasharray="697.033" d="M 21.685,202.90856 C 11.386,183.5396 6,161.93665 6,139.9997 6,65.993866 65.994,6 140,6 c 74.006,0 134,59.993866 134,133.9997 0,74.00583 -59.994,133.9997 -134,133.9997")
// %path.progress__thumb.progress__thumb_blue(stroke-dashoffset="307.033" stroke-dasharray="697.033" d="M 21.685,202.90856 C 11.386,183.5396 6,161.93665 6,139.9997 6,65.993866 65.994,6 140,6 c 74.006,0 134,59.993866 134,133.9997 0,74.00583 -59.994,133.9997 -134,133.9997")

SASS

.progress__bar
    display: block
    width: 280px
    height: 280px
  
.progress__track,
.progress__thumb
    fill: none
    stroke-width: 12px
    stroke-linecap: round
    stroke-linejoin: round
   
.progress__thumb
    &_red
        stroke: #f1574b
    &_blue
        stroke: #00aeef

JavaScript

$(document).ready(function() {
    $('.progress').each(function() {
    
    		var strokeDasharray = 697.033; // (получено через калькулятор https://codepen.io/gabriellewee/pen/EZPYmw/)
    
        var dataMonth = $(this).find('.js--progress__data-month').val() * 1; // данные за период
        var dataToday = $(this).find('.js--progress__data-today').val() * 1; // данные за сегодня
        var dataTotal = $(this).find('.js--progress__data-total').val() * 1; // максимальное возможное значение
        var dataCurrent = dataMonth + dataToday; // данные за период + сегодня

        var progressMonth = $(this).find('.progress__thumb_blue'); // синяя кривая (данные за период)
        var progressToday = $(this).find('.progress__thumb_red'); // красная кривая (данные за период + сегодня)
        
        progressMonth.attr('stroke-dasharray', strokeDasharray);
        progressToday.attr('stroke-dasharray', strokeDasharray);
        
        var monthOffset = (dataTotal - dataMonth) / dataTotal * strokeDasharray;
        var todayOffset = (dataTotal - dataCurrent) / dataTotal * strokeDasharray;
        
        progressMonth.attr('stroke-dashoffset', monthOffset);
        progressToday.attr('stroke-dashoffset', todayOffset);
   });
});