Loading Indicator

Examples

Indeterminate Examples

Circle

<vega-loading-indicator mode="indeterminate"></vega-loading-indicator>

Bar

<div style="width: 300px">
    <vega-loading-indicator shape="bar" mode="indeterminate"></vega-loading-indicator>
</div>

Determinate Examples

Circle

<div style="width: 300px">
    <vega-loading-indicator
    mode="determinate"
    label="Loading Data 35%"
    hint="Please wait"
    percent="35"
    size="large"
    >
    </vega-loading-indicator>
</div>

Bar

<div style="width: 300px">
    <vega-loading-indicator 
        shape="bar" 
        mode="determinate" 
        label="Loading Data 35%"
        hint="Please wait"
        size="large"
        percent="35">
    </vega-loading-indicator>
</div>

Success

Note: you may need to hit refresh to see it in action

<vega-loading-indicator
    size="large"
    mode="determinate"
    id="successLoader"
    percent="0"
></vega-loading-indicator>

const successLoader = document.querySelector('#successLoader');
    const successLoaderTimer = setInterval(() => {
        if (successLoader.percent < 100) {
            successLoader.percent += 1;
            successLoader.label = `${successLoader.percent}%`;
        } else {
            successLoader.status = 'success';
            successLoader.Label = 'Success';
            clearInterval(successLoaderTimer);
        }
    }, 30);

Error

Note: you may need to hit refresh to see it in action

<vega-loading-indicator
    size="large" 
    mode="determinate" 
    id="errorLoader" 
    percent="0">
</vega-loading-indicator>

const errorLoader = document.querySelector('#errorLoader');
const errorLoaderTimer = setInterval(() => {
    if (errorLoader.percent < 80) {
        errorLoader.percent += 1;
        errorLoader.label = `${errorLoader.percent}%`;
    } else {
        errorLoader.status = 'error';
        errorLoader.label = 'Error';
        errorLoader.hint = `${errorLoader.percent}%`;
        clearInterval(errorLoaderTimer);
    }
}, 30);

Usage

Loading indicators are animations used to indicate that a page is still in the loading state. They are used for either large pages or processes which take more than a second or two to render. Loading indicators are of two basic types: determinate and indeterminate indicators.

Indeterminate indicators are used for defining indefinite processes. They do not provide any information to the user about how much of a page or process has completed.

Determinate indicators instead define a percentage of process completion. These animations typically will show how much of a page or application has been completed.

Shapes

There are two standard shapes for loading indicators: either a circular spinner, or a horizontal bar. These each come in two sizes: large and small.. For most use cases the small size is recommended. For large pages or modules, the large variant may be used.

Fill Styles

Fill styles vary depending on whether the indicator is determinate or indeterminate.

Indeterminate

For indeterminate indicators, both ends are rounded. The circle has a start position of 12 o’clock and an ending position of 9 o’clock. The bar animation moves back and forth between the beginning and end position.

Determinate

For determinate indicators, the beginning position is squared off, and the end position is rounded. The circle has a start position of 9 o’clock, and moves clockwise. The bar animation is rounded at both ends, and progresses from left to right as the page or application loads.

Determinate 100% Fill States

The default color of the loading indicator is light blue. It remains this color while the page or application is still loading. If it reaches a success state, it changes to green. If an error state is to be used, the indicator will be changed to red.

Animation

Indeterminate styles may transition to determinate styles if sufficient data is loaded to be able to indicate overall progress. If using solely an indeterminate indicator, the animation will repeat until the process completes.

Properties

Public API

Vegaloader.load

Using VegaLoader.load(options: VegaLoaderOptions): string will return an id which may be used for closing the loading indicator.

To append a loading indicator to the body, you can change the container by setting containerSelector.

type VegaLoaderOptions = {
    containerSelector?: string;
    indicatorOptions?: VegaLoaderIndicatorOptions;
};

Properties

To hide the loading indicator, call VegaLoader.close(id: string).

Loading in Page Example

<vega-button id="load-in-page">Load In Page</vega-button>

    document.querySelector('#load-in-page').addEventListener('vegaClick', () => {
        const loaderId = window.VegaLoader.load();

        setTimeout(() => {
            window.VegaLoader.close(loaderId);
        }, 3000);
    });

Loading in Container Example

<vega-flex direction="col" gap="size-24">
    <vega-card padding="size-24" id="loader-container">
        <div class="v-h-size-80 v-text-primary v-font-field-value">Empty</div>
    </vega-card>

    <vega-button id="load-in-container">Load In Container</vega-button>
</vega-flex>

    document.querySelector('#load-in-container').addEventListener('vegaClick', () => {
        const loaderId = window.VegaLoader.load({
            containerSelector: '#loader-container',
            indicatorOptions: { size: 'small' },
        });

        setTimeout(() => {
            window.VegaLoader.close(loaderId);
            document.querySelector('#loader-container > div').innerHTML = 'Loading Content Success';
        }, 3000);
    });

For more details, view in Storybook.

Accessibility

• Inline text spacing must be adjustable with custom stylesheets.
• Elements must have sufficient color contrast.
• id attribute value must be unique.

Best Practices

Indeterminate vs. Determinate Indicators

Indeterminate indicators are problematic in that they provide incomplete and ambiguous information to the user about what is happening, and many people associate them with systems being “hung” or frozen.

• They typically do not provide any sign of progress
• They do not provide any information to users
• They make wait times feel longer than they actually are; users perceive them to take longer than they may actually be.
• They do not provide any information about expectations for a user.

For this reason, consider using Determinate indicators wherever possible.

Textual Displays

For accessibility and usability purposes, consider including text in the animation.

Title

The title (such as “Processing”) should be used to indicate the status of the process.

Data Load

Numerical values, such as percentage or specific Kb, should be used to indicate the amount of the page or application that is loaded.

Note: You may also provide additional secondary information to provide additional context regarding the loading process.