Blazor Circular 진행 상황 개요

    Ignite UI for Blazor Circular Progress Indicator 구성 요소는 애플리케이션 프로세스가 변경될 때 시각적 표시기를 제공합니다. 원형 표시기는 상태가 변경될 때 모양이 업데이트됩니다.

    Blazor Circular Progress Example

    Usage

    Before using the IgbCircularProgress, you need to register it as follows:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));

    You will also need to link an additional CSS file to apply the styling to the IgbCalendar component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbCircularProgress Value=100/>

    Progress Types

    You can set the type of your indicator, using the Variant attribute. There are five types of circular progress indicators - primary (default), error, success, info, and warning.

    <IgbCircularProgress Value=100 Variant=@ProgressBaseVariant.Success  />

    Indeterminate Progress

    If you want to track a process that is not determined precisely, you can set the Indeterminate property. Also, you can hide the default label of the Ignite UI for Blazor IgbCircularProgress by setting the HideLabel property and customize the progress indicator default label via the exposed LabelFormat property.

    <IgbCircularProgress Value=100 Indeterminate=true/>

    다음 샘플은 위 구성을 보여줍니다.

    Animation Duration

    You can use the AnimationDuration property on the IgbCircularProgress component to specify how long the animation cycle should take in milliseconds.

    <IgbCircularProgress AnimationDuration=5000 Indeterminate=true />

    Gradient Progress

    Customizing the progress bar in order to use a color gradient instead of a solid color could be done via the exposed gradient slot and IgbCircularGradient which defines the gradient stops.

    [!Note] For each IgbCircularGradient defined as gradient slot of Ignite UI for Blazor IgbCircularProgress a SVG stop element would be created. The values passed as color, offset and opacity would be set as stop-color, offset and stop-opacity of the SVG element without further validations.

    <IgbCircularProgress>
    <IgbCircularGradient slot="gradient" Offset="0%"   Color="#ff9a40"/>
    <IgbCircularGradient slot="gradient" Offset="50%"  Color="#1eccd4"/>
    <IgbCircularGradient slot="gradient" Offset="100%" Color="#ff0079"/>
</IgbCircularProgress>

    Styling

    The IgbCircularProgress component exposes CSS parts for almost all of its inner elements:

    이름 설명
    svg 진행 SVG 요소입니다.
    gradient_start 진행 선형 그라데이션 시작 색상입니다.
    gradient_end 진행 선형 그라데이션 끝 색상입니다.
    track 진행률 링의 트랙 영역입니다.
    fill 진행률 표시기 영역입니다.
    label 진행률 레이블입니다.
    value 진행률 레이블 값입니다.
    indeterminate 진행 불확정 상태입니다.
    primary 진행률 표시기 기본 상태입니다.
    danger 진행률 표시기 오류 상태입니다.
    warning 진행률 표시기 경고 상태입니다.
    info 진행률 표시기 정보 상태입니다.
    success 진행률 표시기 성공 상태입니다.

    이 CSS 부분을 사용하여 Circular Progress 스타일을 거의 완전히 제어할 수 있습니다.

    
igc-circular-progress {
  margin: 20px;
  --diameter: 50px;
}

igc-circular-progress::part(gradient_end),
igc-circular-progress::part(gradient_start) {
  stop-color: var(--ig-success-200);
}

igc-circular-progress::part(track) {
  stroke: var(--ig-gray-400);
}

    API References

    Additional Resources