.progress-bar {
    display: flex;
    align-items: flex-end;
    bottom: 0;
    right: 0;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 30px;
}

.progress-bar__count {
    position: absolute;
    color: var(--text);
    font-family: 'Minecraft', 'Rubik', sans-serif;
    font-size: .7rem;

    width: 100%;
    height: 100%;
    padding-bottom: 2px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-bar svg {
    width: 100%;
    height: 100%;
}

.progress-bar svg .progress-bar__progress {
    cx: 25px;
    cy: 25px;
    r: 22px;
    fill: transparent;
    stroke-width: 3px;
    stroke: var(--text);
    stroke-dasharray: 138.2px;
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    transition: all .5s;
}

/* 
size        = 50
strokeWidth = 3
center      = size / 2
            = 50 / 2 = 25
radius      = center - strokeWidth 
            = 25 - 3 = 22

progress    = 100
arcLength   = 2 * π * radius 
            = 2 * π * 22 
            = 138.2

arcOffset   = arcLength * ((100 - progress)/100) 
            = 138.2 * ((100 - 100)/100) 
            = 138.2 * 0 
            = 0
*/