Banquette
On this page

Progress circular

A circular loader to inform on the progress of a long-running task.

Indeterminate

A circular 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 range

      You can also define a range in which the percent of progression is calculated using the progress-min and progress-max props:

      <bt-progress-circular progress-min="10" progress-max="20" progress="15"></bt-progress-circular>

      The result is:

      0%

      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-circular progress="75" :show-progress-text="false"></bt-progress-circular>

      The result is:

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

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

      TIP

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

      Size

      The size of a circular progress is controlled by the font size of its parent.

      By default, the size of the circle is 1em (so it will have the exact same height as the text around it), and 0.3em for its progress text so the text 100% perfectly fits.

      You can of course override all of this using themes.

      Here are some examples of how it behaves with the defaults:

        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
        strokeWidth
        		Width of the circle. 3.5

        Slots

        Name Description
        default

        To override the progress text.

        Props:

        content

        To override the whole content.

        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
        fontFamily var(--bt-font-family-base) -
        fontSize 0.25em -
        fontWeight var(--bt-font-weight-normal) -
        textColor inherit -
        fill none -
        strokeColor var(--bt-color-primary) -
        size 1em -

        Selectors

        Name Comment
        root The root container.
        text The progression text.
        circle The circular progress svg.

        Examples:

        cssSelectors: {
    text: {
        color: '...'
    },
    circle: {
        stroke: '...'
    }
}