El componente Ignite UI for Web Components 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.
<!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 kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
En primer lugar, debe instalar el 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 indeterminate propiedad. Además, puede ocultar la etiqueta predeterminada del Ignite UI for Web Components IgcCircularProgressComponent configurando la hideLabel propiedad y personalizar la etiqueta predeterminada del indicador de progreso a través de la propiedad expuesta labelFormat.
<!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 stop-color, offset y stop-opacity del elemento SVG sin más validaciones.
<!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