Descripción general del progreso circular Web Components
El componente Indicador de progreso circular Ignite UI for Web Components 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.
<!DOCTYPE html><html><head><title>Simple Circular Progress Indicator</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><igc-circular-progressid="circular-progress"value="100"></igc-circular-progress></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Web Components y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
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.
Si desea realizar un seguimiento de un proceso que no está determinado con precisión, puede establecer la propiedad indeterminate. Además, puede ocultar la etiqueta predeterminada de la Ignite UI for Web Components IgcCircularProgressComponent configurando la propiedad hideLabel y personalizando la etiqueta predeterminada del indicador de progreso mediante la propiedad labelFormat expuesta.
<!DOCTYPE html><html><head><title>Indeterminate Circular Progress Indicator</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><igc-circular-progressid="circular-progress"indeterminate></igc-circular-progress></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Duración de la animación
Puede utilizar la propiedad animationDuration en el componente IgcCircularProgressComponent para especificar cuánto tiempo debe durar el ciclo de animación en milisegundos.
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 IgcCircularGradientComponent que define las paradas del degradado.
<!DOCTYPE html><html><head><title>Dynamic Circular Progress Indicator</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="sample-content"><igc-circular-progressid="circularProgress"max="100"><igc-circular-gradientslot="gradient"offset="0%"color="#ff9a40"></igc-circular-gradient><igc-circular-gradientslot="gradient"offset="50%"color="#1eccd4"></igc-circular-gradient><igc-circular-gradientslot="gradient"offset="100%"color="#ff0079"></igc-circular-gradient></igc-circular-progress><divclass="button-container"><igc-icon-buttonid="removeIcon"name="remove"collection="material"></igc-icon-button><igc-icon-buttonid="addIcon"name="add"collection="material"></igc-icon-button></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Para cada IgcCircularGradientComponent definido como ranura de gradiente de Ignite UI for Web Components IgcCircularProgressComponent, se crearía un elemento de parada SVG. Los valores pasados como color, desplazamiento y opacidad se establecerían como color de parada, desplazamiento y opacidad de parada del elemento SVG sin validaciones adicionales.
<!DOCTYPE html><html><head><title>Circular Progress Indicator Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><igc-circular-progressindeterminate></igc-circular-progress></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html