Progress

Basic Usage

Create a progress bar using the k-progress component, set the size with the percentage attribute.

<k-progress percentage="50"></k-progress>

Offset

Set the bar offset with the offset attribute.

<k-progress percentage="50" offset="25"></k-progress>

Color

Set the color with the color attribute.

<k-progress percentage="50" color="green"></k-progress>

Label

Add a label attribute to see the percentage label added to the bar.

<k-progress percentage="33" label></k-progress>

Styles

You can do quite a bit of customization with the css.

<k-progress
  style="
    --radius: 0;
    height: 3rem;
    color: pink;
    font-size: 3rem;
    background-color: #ccf;
  "
  percentage="33"
  label
></k-progress>

Multiple Bars

Use a pipe-delimited (|) list in percentage, color, and offset to make multiple bars.

<k-progress
  percentage="25|25"
  color="blue|red"
  offset="0|50"
></k-progress>

Indeterminate

Use the indeterminate attribute to add infinite animations to the progress bar. set the speed by giving it a value of the animation time (defualt = 2s)

<k-progress indeterminate ></k-progress>
<br />
<k-progress indeterminate="1s" ></k-progress>
<br />
<k-progress indeterminate="4s" color="linear-gradient(to right, var(--c_secondary) 0%, var(--c_primary) 100%)" ></k-progress>

JavaScript Reference

Constructor

Extends ShadowComponent

new Progress()

Requirements

• ShadowComponent

Attributes

percentage: string

The progress percentage(s). Accepts values from 0 to 100. Use pipe-delimited (|) values for multiple bars. Default is 25.

offset: string

The offset position for the bar(s). Use pipe-delimited (|) values to match the number of bars in percentage. Default is 0.

color: string

The fill color for the bar(s). Supports any CSS color value including hex, rgb, variables, and gradients. Use pipe-delimited (|) values for multiple bars. Default is var(--c_primary).

label: boolean

When present, displays the percentage value inside the progress bar.

indeterminate: string

When present, creates an animated indeterminate progress bar. Optionally set the animation duration (e.g., indeterminate="1s", indeterminate="4s"). Default duration is 2s.