IgbCircularProgress – 異なる直径の円形プログレスを重ねて表示する

IgbCircularProgress は 複数の円形プログレスを css で位置を調整することによって重ねて表示することが可能です。それぞれの円の直径は –diameter によって指定することができます。

以下は同心円状に３つの IgbCircularProgress を配置するサンプルコードです。

<div id="progressContainer">
    <IgbCircularProgress @ref="CircularProgressRef1" id="circularProgress1" Max=100 Value=@ProgressValue1>
    </IgbCircularProgress>
    <IgbCircularProgress @ref="CircularProgressRef2" id="circularProgress2" Max=100 Value=@ProgressValue2>
    </IgbCircularProgress>
    <IgbCircularProgress @ref="CircularProgressRef3" id="circularProgress3" Max=100 Value=@ProgressValue3>
    </IgbCircularProgress>
</div>

#progressContainer {
    width: 300px;
    height: 300px;
    position: relative;
}

#circularProgress1 {
    --diameter: 200px;
    --stroke-thickness: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#circularProgress2 {
    --diameter: 175px;
    --stroke-thickness: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#circularProgress3 {
    --diameter: 150px;
    --stroke-thickness: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#circularProgress1::part(label) {
    font-size: 20px;
    top: 40%;
    color: orange;
}

#circularProgress2::part(label) {
    font-size: 20px;
    top: 50%;
    color: lightblue;
}

#circularProgress3::part(label) {
    font-size: 20px;
    top: 62%;
    color: pink;
}