$ringColor: #3986ED;
$ringColorSecondary: #D1CECE;

.ProgressRing {
    text-align: center;
    text-transform: uppercase;
    fill: $ringColor;
    animation-name: rotate;

    h5 {
        color: $ringColor;
        font-weight: 500;
    }

    circle {
        stroke-width: 3;
        transition: 0.35s stroke-dashoffset;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
        fill: none;
    }
    text{
        font-size: 25px;
    }

    &-inner {
        stroke: $ringColorSecondary;
    }

    &-outer {
        stroke: $ringColor;
    }

    &-rotate svg {
        will-change: transform;
        transition-property: transform;
        animation-name: rotate; 
        animation-duration: 1100ms; 
        animation-iteration-count: infinite;
        animation-timing-function: linear;

        @keyframes rotate {
           from {transform: rotate(0deg);}
           to {transform: rotate(360deg);}
        }
    
    }

}