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.

Progress bar
The default progress bar can be used to illustrate a subject such as loading speed,...
Consumption bar
The consumption bar is used in a dashboard to inform the user about an ongoing usage by displaying a status color.

Anatomy

Progress bar container
Represents 100% of the displayed value.
Usage bar
Shows the percentage of the total value.
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:

No usage
The customers' usage is not yet started.
On going usage
The customers have already consumed some of their content...
Approaching the full usage
The customers' usage has reached 80%.
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%

Business & Enterprise

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%

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;
        }