Componente de barra de progreso circular con JavaScript-Progress-bars. js

Vista prévia

Descripción

Progress-bars. js es un < a href = "https://x-tag.github.io/" target = "_ blank" > X-Tag componente web alimentado utilizado para crear una barra de progreso circular, personalizable y animada para indicar el estado de carga.

Funcionamiento

Incluya la biblioteca principal de X-Tag y el script Progress-Bar. js en la página web cuando sea necesario.

<script src="/path/to/x-tag-core.min.js"></script>
<script src="/path/to/progress-bars.js"></script>

Crear una barra de progreso circular y configurarla con los siguientes atributos:

• Progress : obtiene o establece el progreso
• circlesize : obtiene o establece el ancho y el alto del círculo
• barsize : obtiene o establece el tamaño de la barra
• circlebackground : obtiene o establece el color hexadecimal del círculo telón
• barcolor : obtiene o establece el color de la barra
• filledcolor : obtiene o establece el color de la barra cuando se rellena
• progressStringFormat : obtiene o establece una cadena que informa cómo se debe mostrar el progreso. Debe contener la siguiente cadena que se reemplazará como el progreso: {p}.
• displayTextWhenDone : obtiene o establece un valor que indica si el donetext debe reemplazar el progreso de la barra cuando se establece en 100%
• donetext : obtiene o establece el texto que se debe mostrar cuando el progreso se establece en 100%
• isundeterminated : devuelve cero (0) si la barra se establece como definida y una (1) si la barra se establece como undefined
• setUndeterminated (isUndeterminated) : establece la barra como definida o undefined

<circular-progress-bar id="bar-1" barcolor="#EE5C42" filledcolor="#8B3626" progressStringFormat="Progress: {p}%" displayTextWhenDone="false"></circular-progress-bar>