.uniLoadCircle {
    fill: none;
    stroke-linecap: var(--uniLoadCircleCap);
    stroke-linejoin: round;
    stroke-width: calc((var(--uniLoadCircleStroke) * 1px) * var(--uniCircleArc) / (var(--uniLoadCircleSize) * 1px));
    --uniCircleArc: 31.831;
    --uniLoadCircleSize:    40;
    --uniLoadCircleStroke:   2;
    --uniLoadCircleProgress: 33;
    --uniLoadCircleProgressValue: var(--uniLoadCircleProgress);
    --uniLoadCircleStart: 75;
    --uniLoadCircleSegments: 1;
    --uniLoadCircleGap: 0;
    --uniLoadCircleGapArc: calc(var(--uniLoadCircleGap) * var(--uniCircleArc) / var(--uniLoadCircleSize));
    --uniLoadCircleCapArc: calc(var(--uniLoadCircleStroke) * var(--uniCircleArc) / var(--uniLoadCircleSize));
    --uniLoadCircleMaskCapOffset: calc(var(--uniLoadCircleCapArc) / 2);
    --uniLoadCircleMaskGapOffset: calc(var(--uniLoadCircleGapArc) / 2);
    --uniLoadCircleMaskStrokeExtra: 2;
}

.uniLoadCircleProgress {
    stroke-dasharray: calc(var(--uniLoadCircleProgressValue) * 1px) calc((100 - var(--uniLoadCircleProgressValue)) * 1px);
    stroke-dashoffset: calc(var(--uniLoadCircleStart) * -1px);
}

.uniLoadCircleSegmented {
    --uniLoadCircleProgressValue: min(100, calc(var(--uniLoadCircleProgress)));
    --uniLoadCircleSegmentSize: calc(100 / var(--uniLoadCircleSegments));
    --uniLoadCircleSegmentDash: max(0px, calc((var(--uniLoadCircleSegmentSize) - var(--uniLoadCircleGapArc) - var(--uniLoadCircleCapArc)) * 1px));
    --uniLoadCircleSegmentGapSize: calc((var(--uniLoadCircleGapArc) + var(--uniLoadCircleCapArc)) * 1px);
}

.uniLoadCircleSegmented.progressSegments { --uniLoadCircleProgressValue: min(100, calc(var(--uniLoadCircleProgress) * 100 / var(--uniLoadCircleSegments))); }

.uniLoadCircleSegmented .uniLoadCircleProgress { stroke-dasharray: var(--uniLoadCircleSegmentDash) var(--uniLoadCircleSegmentGapSize); }

.uniLoadCircleMask {
    stroke: #fff;
    stroke-linecap: butt;
    stroke-width: calc(((var(--uniLoadCircleStroke) + var(--uniLoadCircleMaskStrokeExtra)) * 1px) * var(--uniCircleArc) / (var(--uniLoadCircleSize) * 1px));
    stroke-dasharray: var(--uniLoadCircleMaskProgress) calc((100px - var(--uniLoadCircleMaskProgress)));
    stroke-dashoffset: calc((var(--uniLoadCircleStart) - var(--uniLoadCircleMaskCapOffset)) * -1px);
    --uniLoadCircleMaskProgress: max(0px, calc((var(--uniLoadCircleProgressValue) - var(--uniLoadCircleMaskGapOffset)) * 1px));
}

.uniLoadCircle,
.uniLoadCircle.capRound  { --uniLoadCircleCap:  round; }
.uniLoadCircle.capSquare { --uniLoadCircleCap: square; }

.uniLoadCircle.capButt {
    --uniLoadCircleCap: butt;
    --uniLoadCircleCapArc: 0;
    --uniLoadCircleMaskCapOffset: 0;
}

.uniLoadCircle.startT { --uniLoadCircleStart: 75; }
.uniLoadCircle.startR { --uniLoadCircleStart:  0; }
.uniLoadCircle.startB { --uniLoadCircleStart: 25; }
.uniLoadCircle.startL { --uniLoadCircleStart: 50; }