<div class="sds-circularProgress -circularProgressTokenUsage -circularProgressTokenUsageDanger" role="meter" aria-label="Utilisation des crédits IA" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-valuetext="Limite de crédits IA atteinte">
<svg class="sds-circularProgress__svg" viewBox="0 0 20 20" aria-hidden="true" focusable="false">
<circle class="sds-circularProgress__bgShape" cx="10" cy="10" r="9" fill="none" />
<circle class="sds-circularProgress__shape" cx="10" cy="10" r="9" fill="none" stroke-dasharray="56.548667 56.548667" transform="rotate(-90 10 10)" />
</svg>
</div>
<div class="{{ namespace }}circularProgress{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}{% if tokenUsageDanger %} -circularProgressTokenUsageDanger{% endif %}"{% if isMeter %} role="meter" aria-label="{{ a11yLabel }}" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100"{% if a11yValueText %} aria-valuetext="{{ a11yValueText }}"{% endif %}{% endif %}{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
<svg class="{{ namespace }}circularProgress__svg" viewBox="{% if tokenUsage %}0 0 20 20{% else %}0 0 36 36{% endif %}" aria-hidden="true"{% if tokenUsage %} focusable="false"{% endif %}>
{% if tokenUsage %}
{% if circleShapeBg %}
<circle class="{{ namespace }}circularProgress__bgShape" cx="10" cy="10" r="9" fill="none" />
{% endif %}
{% if progress > 0 %}
<circle class="{{ namespace }}circularProgress__shape" cx="10" cy="10" r="9" fill="none" stroke-dasharray="{{ (56.548667 * progress) / 100 }} 56.548667" transform="rotate(-90 10 10)" />
{% endif %}
{% else %}
{% if circleShapeBg %}
<circle class="{{ namespace }}circularProgress__bgShape" cx="18" cy="18" r="16" stroke="#000" stroke-width="1.5" fill="none" />
{% endif %}
<path class="{{ namespace }}circularProgress__shape"
stroke-dasharray="{{ progress }}, 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"/>
{% endif %}
</svg>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}circularProgress {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
}
/* children - write selector in full in comments in order to facilitate search */
// circularProgress__childElement
&__shape {
// follows same logic as parent
@include custom-prop-fallback("stroke","sys-color-text-secondary-vivid");
fill: none;
stroke-width: var(--sys-border-width-regular);
stroke-linecap: round;
transition: all 0.1s linear;
}
/* modifiers */
&.-circularProgressTokenUsage {
--comp-circular-progress-token-usage-size: var(--sys-size-width-1250);
flex: 0 0 var(--comp-circular-progress-token-usage-size);
width: var(--comp-circular-progress-token-usage-size);
height: auto;
aspect-ratio: 1;
#{$self}__svg {
display: block;
width: 100%;
height: 100%;
}
#{$self}__bgShape {
stroke: var(--sys-color-background-primary-20);
stroke-width: var(--sys-border-width-regular);
//vector-effect: non-scaling-stroke;
}
#{$self}__shape {
stroke: var(--sys-color-background-primary-100);
stroke-width: var(--sys-border-width-regular);
stroke-linecap: butt;
}
}
&.-circularProgressTokenUsageDanger {
#{$self}__bgShape,
#{$self}__shape {
@include custom-prop-fallback("stroke", "comp-badge-danger-background-color");
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}