Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Progress bar

Progress bar is horizontal visualisation on a 100% scale.

last modified: 30/09/2021 11:10:06

Types

Progress bar is a horizontal part-to-whole data visualization showing relationship of one value compared to its total.

  1. Progress bar
    The default progress bar can be used to illustrate a subject such as loading speed,...

  2. Consumption bar
    The consumption bar is used in a dashboard to inform the user about an ongoing usage by displaying a status color.

Anatomy

  1. Progress bar container
    Represents 100% of the displayed value.

  2. Usage bar
    Shows the percentage of the total value.

  3. Legend (optional)
    Position of the legend depends of the type of progress bar.

Colors

Progress bar

As the usage of secondary colors is defined by segment, here are the colors possibilities for the default progress bar:

Residential
Blue
Magenta
Green
Yellow
Orange
Business
Blue
Turquoise
Enterprise
Blue
Turquoise

Consumption bar

Color defines the status of the users consumptions (datas, minutes, smses, etc.). Four statuses are available:

  1. No usage
    The customers' usage is not yet started.

  2. On going usage
    The customers have already consumed some of their content...

  3. Approaching the full usage
    The customers' usage has reached 80%.

  4. Exceeding usage
    The customers' usage has reached or exceeded 100%.

Unlimited plan

If the customer's plan is unlimited, keep the usage bar colour green all along.

last modified: 17/02/2022 16:05:05

Sizes and colors

last modified: 31/08/2023 16:35:07
Accessibility

<div> with rs-progress class must have:

  • role="progressbar" attribute;
  • aria-valuemin="0" attribute;
  • aria-valuenow="" attribute, with the number of the current value;
  • aria-valuemax="100" attribute, with the maximum value;
  • aria-valuetext="%" attribute, if the value is in % write the number of the current before the % symbol.
  • aria-valuetext="current of max" if the value isn't in % write the current value "of" max value. Don't forget translations
    EN: of
    FR: sur
    NL: van
    DE: von

How does it work

Progress bar is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.progressbar" attribute to work.

Progress bar itself must have a jsrs-progressbar class. It will take the value of the aria-valuenow and give the size of the progress bar.

Default progress bar

38GB

Warning progress bar

Simply add the class rs-meter-full to the span rs-meter .

100%

Error progress bar

Simply add the class rs-meter-error to the span rs-meter .

100%

Gradient progress bar

The component needs the class rs-progress-gradient in place of rs-progress and you need to add the color of the gradient to the span rs-meter .

50%

Residential variant

Only the gradiant color class changes rs-bg-blue / rs-bg-magenta / rs-bg-green / rs-bg-yellow / rs-bg-orange .

50%
50%
50%
50%
50%

Business & Enterprise variant

Only the gradiant color class changes rs-bg-blue / rs-bg-turquoise .

50%
50%

Usage bar

Accessibility

<div> with rs-usage-progress-bar class must have the same attribute than the default progress bar and the following ones:

You also must have inside <div class="rs-usage-progress" :

  • One <div> with rs-usage-progress-title class who will be the title of the progress bar;
  • One <span> with rs-usage-progress-used class who will be the value of data used;
  • One <span> with rs-usage-progress-amount class who will be the amount of data.
Usage bar

Usage bar has the class rs-usage-progress instead of rs-progress .

The bar itself has the class rs-usage-progress-bar-meter and depending of the status you have to add another class:

  • warning state: rs-usage-progress-bar-warn
  • exceed state: rs-usage-progress-bar-exceed

The <span> with the amount has a class according to the state of the progress bar.

  • default state: rs-usage-progress-used
  • warning state: rs-usage-progress-warning
  • exceed state: rs-usage-progress-exceeding
  • no activity state: rs-usage-progress-noactivity
Default with "used" color
250 min used of 1000 min
Default with "no activity" color
250 min used of 1000 min
Warning
250 min used of 1000 min
Exceed
250 min used of 1000 min

Progress bar animation

Animation duration

The animation can be change by adding the attribute data-progress-duration="1s" to the <span> called rs-meter or rs-usage-progress-bar-meter . Indicate the number of secondes of your animation duration

50%
Title here
250 min used of 1000 min

Scroll parent

If your parent container has its own scroll then you need to identify this parent through the attribute data-progress-scrollparent="SELECTOR" . SELECTOR can be a class / id.

50%
Title here
250 min used of 1000 min

JavaScript

How to trigger the js

As Progress bar is a webcomponent, you will have to load inception.webComponentLoad(CONTEXT); first to be able to load the scripts.

Next time you add Progress bar to the page, you have to call this JS: inception.progressbar(CONTEXT);

CONTEXT refers to document or html element parent.

last modified: 28/02/2024 15:30:08

Configuration metadata

Selector: ds-progress-bar

Class: DSProgressBarComponent

Use case example

NOT AVAILABLE LIVE PREVIEW

Inputs

Name Type Default Required Description
currentValue number undefined No Defines the current value
isUsageBar boolean false No Set the style to usage
type ProgressBarTypeEnum ProgressBarTypeEnum.DEFAULT No Defines the type of the visual (exceed, warning, ...)
options IProgressBarOptions undefined Yes Defines the progress bar options
inputProgressBarContent IProgressBarContent undefined Yes Configures the progress' bar functionality

Outputs

None

Models

        export interface IProgressBarOptions {
            /* Check on the pxs design system website
             * to know which color class to use,
             * if no class specified the color will the default one.
             * If the progress bar is full, the color will not be rendered,
             * it will be overridden by the rs-meter-full.
             */
            colorClass?: ProgressBarColorClassEnum | '';
            animationDuration?: boolean;
            /*
             * If the scroll is not on the window
             * but on a specific div (ex: inside an overlayer)
             * add data-progress-scrollparent
             * with the class or the id of the element who is scrolled.
             */
            scrollParent?: boolean;
            /*
             * Choose between one of the following, not both.
             * If no one is chosen, it will be the default progress bar.
             */
            isGradientBar?: boolean;
        }
        export interface IProgressBarContent {
            minValue: number;
            maxValue: number;
            currentValue?: number;
            animationDuration?: number;
            scrollParent?: string;
            // To be used only if the progress bar is about usage
            usageBarTitle?: string;
            usageDataAlreadyUsed?: string;
            usageDataRemaining?: string;
        }
        export enum ProgressBarTypeEnum {
            DEFAULT,
            WARNING,
            EXCEED,
            NOACTIVITY,
        }

        export enum ProgressBarColorClassEnum {
            BLUE = 'rs-bg-blue',
            MAGENTA = 'rs-bg-magenta',
            GREEN = 'rs-bg-green',
            YELLOW = 'rs-bg-yellow',
            ORANGE = 'rs-bg-orange',
        }