> For the complete documentation index, see [llms.txt](https://customlauncher.gitbook.io/customlauncher/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://customlauncher.gitbook.io/customlauncher/launcher-editor/panel-editor/editor/campo-de-elementos/barra-de-progreso.md).

# Barra de progreso

<details>

<summary>Propiedades:</summary>

<div data-with-frame="true"><figure><img src="/files/cyUBmpVgObTodbcU5hvB" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">Nombre al ID:</mark>

Aquí irá el nombre como ID que quieres identificarlo a tu elemento creado.

#### <mark style="color:red;">X, Y, Ancho y Alto:</mark>

Aquí puedes configurar la posición exacta por coordenadas que deseas que esté posicionado tu elemento.

#### <mark style="color:red;">Radio de borde:</mark>

Aquí puedes modificar el radio de las esquinas del elemento para generar efecto de borde.

#### <mark style="color:red;">Capa:</mark>

Aquí va el número de capas que quieres especificar tu elemento. Esto hará que tu elemento se muestre por encima de los demás.

#### <mark style="color:red;">Botón animado:</mark>

{% hint style="info" %}
*<mark style="color:red;">**Esta función solo está disponible para las cuentas PRO**</mark>*
{% endhint %}

Al activar esta opción, hará que tu botón tenga una animación de escalado simulando la animación de un botón real.

#### <mark style="color:red;">Ocultar al inicio:</mark>

Esto hará que tu elemento se oculte al principio de ejecutarse tu lanzador. Es decir, que se mostrará oculto por defecto.

</details>

<details>

<summary>Color:</summary>

<div data-with-frame="true"><figure><img src="/files/bYIy87BYrT0xhgNROXsP" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">Color base:</mark>

Configura el color inicial de la barra de progreso. Este color se mostrará como fondo o estado predeterminado antes de que la barra comience a avanzar.

#### <mark style="color:red;">Color de progreso:</mark>

Configura el color que tendrá la barra mientras avanza, representando visualmente el progreso completado.

</details>

<details>

<summary>Acciones:</summary>

<div data-with-frame="true"><figure><img src="/files/xGW2uLTSV0drnieGCUGW" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">**Lista de acciones:**</mark>

Aquí puedes seleccionar la acción que deseas agregar. Una vez seleccionada, haz clic en el botón **"Agregar"** para incluirla en la lista de acciones configuradas.

#### <mark style="color:red;">Acciones agregadas:</mark>

Aquí se almacenarán las acciones que agregues, las cuales puedes editar, mover de orden de ejecución o eliminar una acción en específica si lo deseas.

<a href="/pages/TuS3diKDA7L5CvXWhMcg" class="button primary" data-icon="star-christmas">Ver lista de acciones</a>

***

#### <mark style="color:red;">**Destino de la acción:**</mark>

Define en qué momento se ejecutará la acción seleccionada durante el proceso de descarga o extracción.

<mark style="color:red;">**Opciones disponibles:**</mark>

* **Inicio de la descarga:** Ejecuta la acción cuando comience la descarga.
* **Fin de la descarga:** Ejecuta la acción cuando la descarga haya finalizado.
* **Inicio de la extracción:** Ejecuta la acción cuando comience la extracción de archivos.
* **Fin de la extracción:** Ejecuta la acción cuando la extracción haya finalizado.

***

#### <mark style="color:red;">**Acción descarga**</mark>

Permite administrar las acciones relacionadas con el proceso de descarga. Aquí podrás visualizar y organizar las acciones configuradas para ejecutarse durante el inicio o final de la descarga.

***

#### <mark style="color:red;">**Acción extracción**</mark>

Permite administrar las acciones relacionadas con el proceso de extracción. Aquí podrás visualizar y organizar las acciones configuradas para ejecutarse durante el inicio o final de la extracción.

</details>