LgCircleProgress

LgCircleProgress affiche l'avancement d'un traitement sous forme circulaire. Utilisez-le lorsque l'indicateur doit rester compact, par exemple dans une tuile, un résumé ou une vue de chargement centrée.

<LgCircleProgress Value="75" Min="0" Max="100" />

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgProgressBase → LgComponentBase
• Package NuGet : Lagoon.UI

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Progression circulaire simple

Comme LgProgress, le composant utilise Value, Min et Max. Sans Label, le pourcentage est calculé automatiquement.

DashboardProgressPage.razor

<LgCircleProgress Value="@Completion"
                  Min="0"
                  Max="100"
                  Kind="Kind.Primary" />

DashboardProgressPage.razor.cs

public partial class DashboardProgressPage : LgPage
{
    // Pourcentage d'avancement affiché dans l'indicateur circulaire.
    private int Completion { get; set; } = 75;
}

Label personnalisé

Label remplace le pourcentage automatique au centre du cercle.

ValidationProgressPage.razor

<LgCircleProgress Value="@ValidatedItems"
                  Min="0"
                  Max="@TotalItems"
                  Label="#ValidationRunning"
                  Kind="Kind.Info" />

ValidationProgressPage.razor.cs

public partial class ValidationProgressPage : LgPage
{
    // Nombre d'éléments validés par le traitement courant.
    private int ValidatedItems { get; set; } = 8;

    // Nombre total d'éléments à valider.
    private int TotalItems { get; set; } = 12;
}

Succès automatique en fin de progression

KindAutoSuccess vaut true par défaut : lorsque la progression atteint Max, le style devient Success, sauf si Kind vaut Warning ou Error.

UploadProgressPage.razor

<LgCircleProgress Value="@UploadedFiles"
                  Min="0"
                  Max="@FileCount"
                  Kind="Kind.Primary"
                  KindAutoSuccess="true" />

UploadProgressPage.razor.cs

public partial class UploadProgressPage : LgPage
{
    // Nombre de fichiers déjà téléversés.
    private int UploadedFiles { get; set; } = 5;

    // Nombre total de fichiers attendus.
    private int FileCount { get; set; } = 5;
}

États d'avertissement et d'erreur

Quand Kind vaut Warning ou Error, la fin de progression conserve ce style. Cela permet d'afficher un indicateur final différent d'un succès.

QualityCheckPage.razor

<LgCircleProgress Value="@CheckedRules"
                  Min="0"
                  Max="@TotalRules"
                  Kind="@ProgressKind" />

<LgButton Text="#RunQualityCheck" OnClick="RunQualityCheckAsync" />

QualityCheckPage.razor.cs

public partial class QualityCheckPage : LgPage
{
    // Nombre de règles déjà contrôlées par le traitement.
    private int CheckedRules { get; set; }

    // Nombre total de règles à contrôler.
    private int TotalRules { get; set; } = 30;

    // Style courant de l'indicateur, ajusté selon le résultat du contrôle.
    private Kind ProgressKind { get; set; } = Kind.Primary;

    // Simule un contrôle qualité et bascule en erreur si une étape échoue.
    private async Task RunQualityCheckAsync(ActionEventArgs args)
    {
        ProgressKind = Kind.Primary;
        for (int i = 0; i <= TotalRules; i++)
        {
            CheckedRules = i;
            if (i > 20)
            {
                ProgressKind = Kind.Error;
            }
            await Task.Delay(40, args.CancellationToken);
            StateHasChanged();
        }
    }
}

Ajustement du tracé SVG

CircleDash correspond à la circonférence utilisée pour calculer le tracé SVG. Conservez la valeur par défaut sauf si un thème ou une surcharge graphique impose une géométrie différente.

CustomCircleProgressPage.razor

<LgCircleProgress Value="60"
                  Min="0"
                  Max="100"
                  CircleDash="295.31" />

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
CircleDash	double	295.31	LgCircleProgress	Circonférence utilisée pour le calcul du tracé circulaire.
KindAutoSuccess	bool	true	LgCircleProgress	Applique automatiquement un style de succès quand la progression est terminée, sauf pour les styles d'avertissement et d'erreur.
CssClass	string	null	LgProgressBase	Classes CSS additionnelles appliquées au conteneur.
Kind	Kind	Kind.Primary	LgProgressBase	Style visuel de la progression.
Label	string	null	LgProgressBase	Label affiché au centre ; si absent, un pourcentage ou une icône de fin est affiché.
Max	int	100	LgProgressBase	Borne maximale de la progression.
Min	int	0	LgProgressBase	Borne minimale de la progression.
Value	int	0	LgProgressBase	Valeur courante de la progression.

Énumérations associées

Kind

Style visuel du composant. La valeur par défaut de LgCircleProgress.Kind est Primary.

Valeur	Description
Primary	Style principal (valeur par défaut pour LgCircleProgress).
Default	Style par défaut.
Secondary	Style secondaire.
Success	Style « succès ».
Error	Style « erreur ».
Warning	Style « avertissement ».
Info	Style « information ».

Accessibilité

• Le composant affiche un label textuel ou une icône au centre du cercle ; fournissez Label lorsque le pourcentage seul n'explique pas le traitement.
• Pour les progressions critiques, placez l'indicateur avec un titre ou un texte adjacent décrivant l'opération suivie.
• Si vous avez besoin des attributs role="progressbar", aria-valuenow, aria-valuemin et aria-valuemax rendus directement, utilisez LgProgress, qui les expose dans son balisage.

Composants liés

• LgProgress — barre de progression avec attributs ARIA natifs.
• LgLoaderView — conteneur de chargement utilisant LgCircleProgress par défaut pour les progressions déterminées.
• LgBanner — message de feedback persistant.