Progressbar

Of the different wait-animation feedbacks, the progressbar is the most informative. It reassures the user that the computer is processing their request, it shows how much has already been completed and how much is left.

Summary

Color. By default, the progressbar is in the $color-highlight
10 seconds or more. A rule of thumb is: If an action takes longer than 10 seconds, we use the progressbar (aka. percent-done indicator). You can find more information about this topic on the page Loading
Animated progressbar. For page performance reasons, it is not always possible to keep the percent-done value up to date. To reassure the user that the system is working and processing data, we use the animation property.
Knight Rider effect. For technical reasons it is not always possible to return a progress value. Nevertheless, to indicate to the user that data is being processed, we use the infinite Knight Rider effect.

Example

<wui-progress :value="33" class="m-b-15"></wui-progress>
<wui-progress :value="66" class="m-b-15"></wui-progress>
<wui-progress :value="100" class="m-b-15"></wui-progress>

Animated progressbar

Updating a progressbar at any time and keeping it always up to date sometimes comes at a high cost. The fact that data is constantly being fed in can have a negative impact on the overall performance of the page. In such situations, we update the progressbar only in case of a page refresh. This trade-off allows us to keep performance high on the one hand, and inform the user in the best possible way on the other.

The animated progressbar is used especially on detail pages. Since the animation draws a lot of attention due to the movement, you should use it very sparingly in order not to distract too much from other UI elements.

<wui-progress :value="37" animated></wui-progress>

Knight Rider effect

In some use cases, it is simply not possible to return a percent-done value. Nevertheless, we would like to inform the user that one or more actions are being processed in the background. When using this loading indicator it is usually more important to indicate that something is happening in the background than to provide information about how long it might take. This animation also attracts a lot of attention due to the movement and should therefore be used sparingly.

On this example page you can see it in the wild.

<div>
  <wui-progress :value="100" animated="knightrider"></wui-progress>
  <br>
  <i class="fas fa-arrow-right font-size--md m-r-5"></i> On this <a href="../../examples/scene-header/" title=".../examples/scene-header/">example page</a> you can see it in the wild.
</div>

Don't confuse animated progressbar with the Knight Rider effect. In the animated progress bar, there is indeed a percent-done value. However, this is not always up to date. The Knight Rider effect, on the other hand, is used when there is no percent-done value at all.

Variants

In addition to the wescale standard colors, the progressbar is also available in the different status colors. By default, it is always in $color-highlight For different use cases, however, it can also be displayed in other colors. For example, if a task failed, we would use the variant="danger"

<wui-progress variant="highlight" :value="12" show-value class="m-b-15"></wui-progress>
<wui-progress variant="active" :value="24" show-value class="m-b-15"></wui-progress>
<wui-progress variant="primary" :value="36" show-value class="m-b-15"></wui-progress>
<wui-progress variant="success" :value="48" show-value class="m-b-15"></wui-progress>
<wui-progress variant="warning" :value="60" show-value class="m-b-15"></wui-progress>
<wui-progress variant="danger" :value="72" show-value class="m-b-15"></wui-progress>
<wui-progress variant="info" :value="84" show-value class="m-b-15"></wui-progress>

Use our custom progress component for displaying simple or complex progress bars, featuring support for horizontally stacked bars, animated backgrounds, and text labels.

<template>
  <div>
    <wui-progress
      :value="value"
      :max="max"
      show-progress
      animated
    ></wui-progress>
    <wui-progress class="m-t-5" :max="max" show-value>
      <wui-progress-bar
        :value="value * (6 / 10)"
        variant="success"
      ></wui-progress-bar>
      <wui-progress-bar
        :value="value * (2.5 / 10)"
        variant="warning"
      ></wui-progress-bar>
      <wui-progress-bar
        :value="value * (1.5 / 10)"
        variant="danger"
      ></wui-progress-bar>
    </wui-progress>

    <b-button class="m-t-10" @click="randomValue">Click me</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 45,
        max: 100,
      };
    },
    methods: {
      randomValue() {
        this.value = Math.random() * this.max;
      },
    },
  };
</script>

<!-- wui-progress.vue -->

Value

Set the maximum value with the max prop (default is 100), and the current value via the value prop (default 0).

When creating multiple bars in a single process, place the value prop on the individual <wui-progress-bar> sub components (see the Multiple Bars section below for more details)

Labels

Add labels to your progress bars by either enabling show-progress (percentage of max) or show-valuefor the current absolute value. You may also set the precision (number of digits after the decimal) via the precision prop (default is 0digits after the decimal).

<template>
  <div>
    <h5>No label</h5>
    <wui-progress :value="value" :max="max" class="m-b-10"></wui-progress>

    <h5>Value label</h5>
    <wui-progress
      :value="value"
      :max="max"
      show-value
      class="m-b-10"
    ></wui-progress>

    <h5>Progress label</h5>
    <wui-progress
      :value="value"
      :max="max"
      show-progress
      class="m-b-10"
    ></wui-progress>

    <h5>Value label with precision</h5>
    <wui-progress
      :value="value"
      :max="max"
      :precision="2"
      show-value
      class="m-b-10"
    ></wui-progress>

    <h5>Progress label with precision</h5>
    <wui-progress
      :value="value"
      :max="max"
      :precision="2"
      show-progress
      class="m-b-10"
    ></wui-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 33.333333333,
        max: 50,
      };
    },
  };
</script>

<!-- wui-progress-labels.vue -->

Custom progress label

Need more control over the label? Provide your own label by using the default slot within a <wui-progress-bar> sub-component, or by using the label or label-html property on <wui-progress-bar>:

<template>
  <div>
    <h5>Custom label via default slot</h5>
    <wui-progress :max="max" height="2rem">
      <wui-progress-bar :value="value">
        <span>Progress: <strong>{ value.toFixed(2) } / { max }</strong></span>
      </wui-progress-bar>
    </wui-progress>

    <h5 class="m-t-10">Custom label via property</h5>
    <wui-progress :max="max">
      <wui-progress-bar
        :value="value"
        :label="`${((value / max) * 100).toFixed(2)}%`"
      ></wui-progress-bar>
    </wui-progress>

    <h5 class="m-t-10">Custom label via property (HTML support)</h5>
    <wui-progress :max="max">
      <wui-progress-bar
        :value="value"
        :label-html="`<del>${value}</del>`"
      ></wui-progress-bar>
    </wui-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 33.333333333,
        max: 50,
      };
    },
  };
</script>

<!-- wui-progress-custom-labels.vue -->

Precedence order for label methods (top-most has precedence):

default slot of <wui-progress-bar>
label prop of <wui-progress-bar>
show-progress prop of <wui-progress-bar>
show-value prop of <wui-progress-bar>
show-progress prop of <wui-progress>
show-value prop of <wui-progress>
no label

Width and height

<wui-progress> will always expand to the maximum with of its parent container. To change the width, place <wui-progress> in a standard WUI column or apply one of the standard WUI width classes.

<template>
  <div>
    <h5>Default width</h5>
    <wui-progress :value="value" class="m-b-10"></wui-progress>

    <h5>Custom widths</h5>
    <wui-progress :value="value" class="w-3/4 m-b-5"></wui-progress>
    <wui-progress :value="value" class="w-1/2 m-b-5"></wui-progress>
    <wui-progress :value="value" class="w-1/4"></wui-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 75,
      };
    },
  };
</script>

<!-- wui-progress-width.vue -->

The height of the progress bar can be controlled with the height prop. The height value should be a standard CSS dimension (px, rem, em, etc.). The default height is 4px.

<template>
  <div>
    <h5>Default height</h5>
    <wui-progress :value="value" show-progress class="m-b-10"></wui-progress>

    <h5>Custom heights</h5>
    <wui-progress
      height="2rem"
      :value="value"
      show-progress
      class="m-b-2"
    ></wui-progress>
    <wui-progress
      height="20px"
      :value="value"
      show-progress
      class="m-b-2"
    ></wui-progress>
    <wui-progress height="2px" :value="value"></wui-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 75,
      };
    },
  };
</script>

<!-- wui-progress-height.vue -->

Backgrounds

Use background variants to change the appearance of individual progress bars. The default variant is highlight-30.

Striped backgrounds

Set striped to apply a stripe via CSS gradient over the progress bar's background variant.

<template>
  <div>
    <wui-progress :value="25" :striped="striped"></wui-progress>

    <b-button variant="secondary" @click="striped = !striped" class="m-t-10">
      { striped ? 'Remove' : 'Add' } Striped
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        striped: true,
      };
    },
  };
</script>

<!-- wui-progress-striped.vue -->

Animated backgrounds

The background can also be animated by setting the animated prop.

<template>
  <div>
    <wui-progress
      :value="25"
      variant="success"
      striped
      :animated="animate"
    ></wui-progress>
    <wui-progress
      :value="50"
      variant="info"
      striped
      :animated="animate"
      class="mt-2"
    ></wui-progress>
    <wui-progress
      :value="75"
      variant="warning"
      striped
      :animated="animate"
      class="mt-2"
    ></wui-progress>
    <wui-progress
      :value="100"
      variant="danger"
      :animated="animate"
      class="mt-3"
    ></wui-progress>

    <b-button variant="secondary" @click="animate = !animate" class="m-t-10">
      { animate ? 'Stop' : 'Start' } Animation
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        animate: true,
      };
    },
  };
</script>

<!-- wui-progress-animated.vue -->

Knight rider animation

Set animated="knightrider" for the "Knight Rider" effect (value prop must be set to 100 for this).

<template>
  <div>
    <wui-progress :value="100" animated="knightrider"></wui-progress>
  </div>
</template>

<script>
  export default {};
</script>

<!-- wui-progress-animated-knight-rider.vue -->

Notes:

if animated is true, striped will automatically be enabled.
Animated progress bars don't work in Opera 12 — as they don't support CSS3 animations.
The animation effect of this component is dependent on the prefers-reduced-motion media query.

Multiple bars

Include multiple <wui-progress-bar> sub-components in a <wui-progress> component to build a horizontally stacked set of progress bars.

<template>
  <div>
    <wui-progress :max="max" class="m-b-10">
      <wui-progress-bar variant="active" :value="values[0]"></wui-progress-bar>
      <wui-progress-bar variant="success" :value="values[1]"></wui-progress-bar>
      <wui-progress-bar variant="info" :value="values[2]"></wui-progress-bar>
    </wui-progress>

    <wui-progress show-progress :max="max" class="m-b-10">
      <wui-progress-bar variant="active" :value="values[0]"></wui-progress-bar>
      <wui-progress-bar variant="success" :value="values[1]"></wui-progress-bar>
      <wui-progress-bar variant="info" :value="values[2]"></wui-progress-bar>
    </wui-progress>

    <wui-progress show-value striped :max="max" class="m-b-10">
      <wui-progress-bar variant="active" :value="values[0]"></wui-progress-bar>
      <wui-progress-bar variant="success" :value="values[1]"></wui-progress-bar>
      <wui-progress-bar variant="info" :value="values[2]"></wui-progress-bar>
    </wui-progress>

    <wui-progress :max="max">
      <wui-progress-bar
        :value="values[0]"
        variant="primary"
        show-progress
      ></wui-progress-bar>
      <wui-progress-bar
        :value="values[1]"
        variant="success"
        animated
        show-progress
      ></wui-progress-bar>
      <wui-progress-bar
        :value="values[2]"
        variant="info"
        striped
        show-progress
      ></wui-progress-bar>
    </wui-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        values: [15, 30, 20],
        max: 100,
      };
    },
  };
</script>

<!-- wui-progress-multiple.vue -->

<wui-progress-bar> will inherit most of the props from the <wui-progress> parent component, but you can override any of the props by setting them on the <wui-progress-bar>

Notes:

height, if specified, should always set on the <wui-progress> component.
<wui-progress-bar> will not inherit value from <wui-progress>.

Component reference

`<wui-progress>`

<wui-progress> Properties
<wui-progress> Slots

Properties

Property	Type	Default	Description
`animated`	`Boolean` or `String`	`false`	Enable the animated background. Set it to `true` for the default animation, or set it to "knightrider" for the Knight Rider effect (`value` prop must be set to `100` for this). Also automatically sets 'striped'
`height`	`String`	`4px`	Override the default height by specifying a CSS height value (including units)
`max`	`Number` or `String`	`100`	Set the maximum value
`precision`	`Number` or `String`	`0`	The number of digits after the decimal to round the value to
`show-progress`	`Boolean`	`false`	Displays the current progress value as a percentage
`show-value`	`Boolean`	`false`	Displays the current progress value
`striped`	`Boolean`	`false`	Enable the striped background
`value`	`Number` or `String`	`0`	The current value of the progress bar
`variant`	`String`		Applies one of the WUI theme color variants to the component

Slots

Name	Description
`default`	Content (progress bars) to place in the progress element

`<wui-progress-bar>`

<wui-progress-bar> Properties
<wui-progress-bar> Slots

Properties

Property	Type	Default	Description
`animated`	`Boolean` or `String`	`false`	Enable the animated background. Set it to `true` for the default animation, or set it to "knightrider" for the Knight Rider effect (`value` prop must be set to `100` for this). Also automatically sets 'striped'
`label`	`String`		Text string to explicitly set the label as
`label-html` Use with caution	`String`		HTML string to explicitly set the label as
`max`	`Number` or `String`	`100`	Set the maximum value
`precision`	`Number` or `String`	`0`	The number of digits after the decimal to round the value to
`show-progress`	`Boolean`	`false`	Displays the current progress value as a percentage
`show-value`	`Boolean`	`false`	Displays the current progress value
`striped`	`Boolean`	`false`	Enable the striped background
`value`	`Number` or `String`	`0`	The current value of the progress bar
`variant`	`String`		Applies one of the WUI theme color variants to the component

Caution: Props that support HTML strings (*-html) can be vulnerable to Cross Site Scripting (XSS) attacks when passed raw user supplied values. You must properly sanitize the user input first!

Slots

Name	Description
`default`	Content to place in the progress bar. Overrides the `label`, `label-html`, `show-progress` and `show-value` props

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export
`<wui-progress>`	`WuiProgress`
`<wui-progress-bar>`	`WuiProgressBar`

Example

import { WuiProgress } from "@wui/wui-vue/lib/progress";
Vue.component("wui-progress", WuiProgress);

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`ProgressPlugin`	`@wui/wui-vue/lib/progress`

Example

import { ProgressPlugin } from "@wui/wui-vue/lib/progress";
Vue.use(ProgressPlugin);

From WUI and

with

WUI is wescale’s design system