Banquette
On this page

Progress horizontal

An horizontal progress bar to inform on the progress of a long-running task.

Indeterminate

An horizontal progress with unknown progress:

    Progress

    The prop progress allows you to define the percent of progression. It is null by default.

    Below some examples:

      Progress text

      By default, the progress text is automatically shown if a progress is defined, and hidden when the progress is indeterminate. You can manually control its visibility via the show-progress-text prop:

      <bt-progress-horizontal progress="75" :show-progress-text="false"></bt-progress-horizontal>

      The result is:

      You can define your own progress text using the default slot:

      <bt-progress-horizontal progress="75">Soon</bt-progress-horizontal>
      Soon

      TIP

      Setting :show-progress-text="false" will also hide the text from the slot.

      Props

      Method Description Default
      progress
      		Current progression value.
      The percent or progression will depend on the min and max values (given by progressMin and progressMax).      		 null
      progressMin
      		If progress is <= to this value, the percent of progression will be 0. 0
      progressMin
      		If progress is <= to this value, the percent of progression will be 0. 0
      showProgressText
      		If true the progress text is visible. true

      Slots

      Name Description
      default

      To override the progress text.

      Props:

      Theming

      Below the list of all CSS variables and selectors available to customize the appearance of the component. If you're not familiar on how the theming works, please refer to the VueThemes documentation.

      Variables

      Variable Default Comment
      backgroundColor var(--bt-color-gray-50) Background color of the empty part of the progress bar.
      valueBackgroundColor var(--bt-color-primary) Background color of the filled part of the progress bar.
      valueTextColor var(--bt-color-primary-contrast) Color of the progress text.
      height 8px -
      borderRadius var(--bt-border-radius-sm) -
      indeterminateAnimationDuration 1s Duration of an animation cycle when indeterminate.
      determinateAnimationDuration 0.3s Duration of the transition between a two progress values.

      Selectors

      Name Comment
      root The root container.
      progressBar The filled part of the progress bar.
      progressText The progress text container.

      Examples:

      cssSelectors: {
    root: {
        background: '...'
    },
    progressBar: {
        border: '...'
    }
}