Blazor Resumen del Progreso Circular

El componente Ignite UI for Blazor Indicador de progreso circular proporciona un indicador visual del proceso de una aplicación a medida que cambia. El indicador circular actualiza su apariencia a medida que cambia su estado.

Blazor Circular Progress Example

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="root">

    <style>
        #circularProgress {
            margin: 20px;
            --diameter: 50px;
        }
    </style>

    <IgbCircularProgress id="circularProgress" Value=100/>
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Usage

Antes de utilizar IgbCircularProgress, debe registrarlo de la siguiente manera:

// in Program.cs file

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

También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbCalendar componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

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

<IgbCircularProgress Value=100/>
razor

Progress Types

Puede establecer el tipo de su indicador utilizando el atributo variant. Hay cinco tipos de indicadores de progreso circulares: primario (predeterminado), error, éxito, información y advertencia.

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

Indeterminate Progress

Si desea realizar un seguimiento de un proceso que no está determinado con precisión, puede establecer la indeterminate propiedad. Además, puede ocultar la etiqueta predeterminada del Ignite UI for Blazor IgbCircularProgress configurando la hideLabel propiedad y personalizar la etiqueta predeterminada del indicador de progreso a través de la propiedad expuesta labelFormat.

<IgbCircularProgress Value=100 Indeterminate=true/>
razor

El siguiente ejemplo demuestra la configuración anterior:

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="root">

    <style>
        #circularProgress {
            --diameter: 50px;
        }
    </style>

    <IgbCircularProgress id="circularProgress" Indeterminate=true />
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Animation Duration

Puede utilizar la propiedad animationDuration en el componente IgbCircularProgress para especificar cuánto tiempo debe durar el ciclo de animación en milisegundos.

<IgbCircularProgress AnimationDuration=5000 Indeterminate=true />
razor

Gradient Progress

Se puede personalizar la barra de progreso para usar un degradado de color en lugar de un color sólido a través de la ranura gradient expuesta y IgbCircularGradient que define las paradas del degradado.

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
#sampleContent {
width: 300px;
display: flex;
align-items: center;
margin-top: 30px;
}

#circularProgress {
margin-right: 50px;
margin-left: 20px;
--diameter: 100px;
--stroke-thickness: 5px;
}
</style>

<div id="sampleContent">
    <IgbCircularProgress @ref="CircularProgressRef" id="circularProgress" Max=100 Value=@ProgressValue>
        <IgbCircularGradient slot="gradient" Offset="0%"   Color="#ff9a40"/>
        <IgbCircularGradient slot="gradient" Offset="50%"  Color="#1eccd4"/>
        <IgbCircularGradient slot="gradient" Offset="100%" Color="#ff0079"/>
    </IgbCircularProgress>
    <div class="buttonContainer">
        <IgbIconButton @ref="RemoveIconRef" @onclick="OnRemoveIconClick" IconName="remove" Collection="material" />
        <IgbIconButton @ref="AddIconRef" @onclick="OnAddIconClick" IconName="add" Collection="material" />
    </div>
</div>

@code {

    private IgbCircularProgress CircularProgressRef { get; set; }
    private double ProgressValue { get; set; }

    private IgbIconButton AddIconRef { get; set; }
    private IgbIconButton RemoveIconRef { get; set; }

    protected override void OnInitialized()
    {

        this.ProgressValue = 0;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.AddIconRef != null && this.RemoveIconRef != null)
        {
            await this.AddIconRef.EnsureReady();
            await this.RemoveIconRef.EnsureReady();

            string addIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'><path d='M0 0h24v24H0z' fill='none'/><path d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/></svg>";
            string removeIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'><path d='M0 0h24v24H0z' fill='none'/><path d='M19 13H5v-2h14v2z'/></svg>";

            await this.AddIconRef.RegisterIconFromTextAsync("add", addIcon, "material");
            await this.RemoveIconRef.RegisterIconFromTextAsync("remove", removeIcon, "material");
        }
    }

    private void OnAddIconClick(MouseEventArgs args)
    {
        this.ProgressValue = this.ProgressValue + 10;
    }

    private void OnRemoveIconClick(MouseEventArgs args)
    {
        if(this.ProgressValue > 0)
        {
            this.ProgressValue = this.ProgressValue - 10;
        }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

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>
razor

Styling

El IgbCircularProgress componente expone partes CSS para casi todos sus elementos internos:

Nombre	Descripción
`svg`	El elemento SVG de progreso.
`gradient_start`	El color inicial del gradiente lineal de progreso.
`gradient_end`	El color final del gradiente lineal de progreso.
`track`	El área de seguimiento del anillo de progreso.
`fill`	El área del indicador de progreso.
`label`	La etiqueta de progreso.
`value`	El valor de la etiqueta de progreso.
`indeterminate`	El progreso en estado indeterminado.
`primary`	El indicador de progreso del estado primario.
`danger`	El estado de error del indicador de progreso.
`warning`	El estado de advertencia del indicador de progreso.
`info`	El estado de información del indicador de progreso.
`success`	El estado de éxito del indicador de progreso.

Usando estas partes de CSS, tenemos un control casi total sobre el estilo de 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);
}

css

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="root">

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

        igc-circular-progress::part(gradient_end),
        igc-circular-progress::part(gradient_start) {
            stop-color: #72da67;
        }

        igc-circular-progress::part(track) {
            stroke: rgb(216, 211, 211);
        }
    </style>

    <IgbCircularProgress Indeterminate=true/>
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css