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

See deprecated code
expiry date: 30/04/2021

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: 29/07/2022 16:25:05
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.

Default progress bar

38GB

Default full progress bar

100%

Gradient progress bar

50%

Residential

50%
50%
50%
50%
50%

Business & Enterprise

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

Use rs-usage-progress instead of rs-progress . <span> with rs-usage-progress-used has to take states classes according to the state of the progress bar.

  • success state: rs-usage-progress-bar-meter ;
  • warning state: rs-usage-progress-bar-warn with rs-usage-progress-bar-meter + rs-usage-progress-warning on the value <span> ;
  • exceed state: rs-usage-progress-bar-exceed with rs-usage-progress-bar-meter + rs-usage-progress-exceeding on the value <span> .
Calls
250 min used of 1000 min

Progress bar animation

Animation duration

50%

Scroll parent

50%

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.

Progress animation

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.

If you need a different speed for the animation add data-progress-duration attribute with the number of secondes of your animation duration.

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.


Deprecated

EXPIRY DATE: 30/04/2021

The progress bars below are deprecated and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.

Class on rs-meter :

  • rs-bg-dark-blue
  • rs-bg-red
  • rs-bg-grey
  • rs-bg-almond
50%
50%
50%
50%
last modified: 16/09/2022 12:45:14

Configuration metadata

Selector: lib-progress-bar

Class: ProgressBarComponent

Use case example

NOT AVAILABLE LIVE PREVIEW

Inputs

Name Type Default Required Description
currentValue number undefined No Defines the current value
options IProgressBarOptions undefined Yes Defines the progress bar options
inputProgressBarContent IProgressBarContent undefined Yes Configures the progress' bar functionality

Outputs

None

Models

        export interface IProgressBarOptions {
            colorClass?: string;
            animationDuration?: boolean;
            scrollParent?: boolean;
            isGradientBar?: boolean;
            isUsageBar?: boolean;
            warningState?: boolean;
            exceedState?: boolean;
        }
        export interface IProgressBarContent {
            minValue: number;
            maxValue: number;
            currentValue?: number;
            animationDuration?: number;
            scrollParent?: string;
            usageBarTitle?: string;
            usageDataAlreadyUsed?: string;
            usageDataRemaining?: string;
        }