Web Components Resumen del Progreso Circular

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.

Web Components Circular Progress Example

import { defineComponents, IgcCircularProgressComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './CircularProgressStyle.css'

defineComponents(IgcCircularProgressComponent);

export class SimpleCircularProgress {
    constructor() {
    }
}

new SimpleCircularProgress();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Circular Progress Indicator</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
        <igc-circular-progress id="circular-progress" value="100"></igc-circular-progress>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

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

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

Usage

En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents
cmd

Luego necesitarás importar IgcCircularProgressComponent, su CSS necesario y registrar su módulo, así:

import {defineComponents, IgcCircularProgressComponent} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCircularProgressComponent);
ts

Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

La forma más sencilla de empezar a utilizarlo IgcCircularProgressComponent es la siguiente:

<igc-circular-progress value="100"></igc-circular-progress>
html

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.

<igc-circular-progress value="100" variant="success"></igc-circular-progress>
html

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 Web Components IgcCircularProgressComponent configurando la hideLabel propiedad y personalizar la etiqueta predeterminada del indicador de progreso a través de la propiedad expuesta labelFormat.

<igc-circular-progress value="100" indeterminate="true"></igc-circular-progress>
html

El siguiente ejemplo demuestra la configuración anterior:

import { defineComponents, IgcCircularProgressComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './IndeterminateCircularProgressStyle.css'

defineComponents(IgcCircularProgressComponent);

export class IndeterminateCircularProgress {
    constructor() {
    }
}

new IndeterminateCircularProgress();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Indeterminate Circular Progress Indicator</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
        <igc-circular-progress id="circular-progress" indeterminate></igc-circular-progress>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

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

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Animation Duration

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

<igc-circular-progress animation-duration="5000" indeterminate></igc-circular-progress>
html

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 IgcCircularGradientComponent que define las paradas del degradado.

import { defineComponents, IgcCircularProgressComponent, IgcIconButtonComponent, registerIconFromText} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './DynamicCircularProgressStyle.css';

defineComponents(IgcCircularProgressComponent, IgcIconButtonComponent);
const 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>';
const 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>';

export class DynamicCircularProgress {
    private circularProgress: IgcCircularProgressComponent;
    private addIcon: IgcIconButtonComponent;
    private removeIcon: IgcIconButtonComponent;

    constructor() {
        registerIconFromText("remove", removeIcon, "material");
        registerIconFromText("add", addIcon, "material");
        this.circularProgress = document.getElementById("circularProgress") as IgcCircularProgressComponent;
        this.circularProgress.value = 0;
        this.removeIcon = document.getElementById("removeIcon") as IgcIconButtonComponent;
        this.addIcon = document.getElementById("addIcon") as IgcIconButtonComponent;

        this.removeIcon.addEventListener('click', () => {
            if(this.circularProgress.value > 0) {
                this.circularProgress.value = this.circularProgress.value - 10;
            }
            else {
                this.circularProgress.value = 0;
            }
        });

        this.addIcon.addEventListener('click', () => {
            this.circularProgress.value = this.circularProgress.value + 10;
        });
    }
}

new DynamicCircularProgress();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Circular Progress Indicator</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="sample-content">
      <igc-circular-progress id="circularProgress" max="100">
        <igc-circular-gradient slot="gradient" offset="0%" color="#ff9a40">
        </igc-circular-gradient>
        <igc-circular-gradient slot="gradient" offset="50%" color="#1eccd4">
        </igc-circular-gradient>
        <igc-circular-gradient slot="gradient" offset="100%" color="#ff0079">
        </igc-circular-gradient>
      </igc-circular-progress>
      <div class="button-container">
        <igc-icon-button id="removeIcon" name="remove" collection="material"></igc-icon-button>
        <igc-icon-button id="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) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

#sample-content {
    width: 300px;
    display: flex;
    align-items: center;
    margin-top: 30px;
}

#circularProgress {
    margin-right: 50px;
    margin-left: 20px;
    --diameter: 50px;
    --stroke-thickness: 3px;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

For each IgcCircularGradientComponent defined as gradient slot of Ignite UI for Web Components IgcCircularProgressComponent 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.

<igc-circular-progress>
    <igc-circular-gradient slot="gradient" offset="0%" color="#ff9a40"></igc-circular-gradient>
    <igc-circular-gradient slot="gradient" offset="50%" color="#1eccd4"></igc-circular-gradient>
    <igc-circular-gradient slot="gradient" offset="100%" color="#ff0079"></igc-circular-gradient>
</igc-circular-progress>
html

Styling

El IgcCircularProgressComponent 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

import { defineComponents, IgcCircularProgressComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './CircularProgressStyling.css'

defineComponents(IgcCircularProgressComponent);

export class CircularProgressStyling {
    constructor() {
    }
}

new CircularProgressStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Circular Progress Indicator Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
        <igc-circular-progress indeterminate></igc-circular-progress>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

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);
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css