Search results

Types in JavaScript ProgressBar control

08 Apr 2021 / 2 minutes to read

Visualize progress in different shapes (rectangle, circle, and semi-circle) to give a unique appearance to your app design.

Linear

Set type to Linear to get the linear progress bar. It also support secondary progress and different mode of progress.

Source
Preview
index.ts
index.html
Copied to clipboard
import { ProgressBar } from '@syncfusion/ej2-progressbar';

    let uploadProgress: ProgressBar = new ProgressBar({
        type: 'Linear',
        height: '60',
        value: 100,
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        }
    });
    uploadProgress.appendTo('#lineardeterminate');
    let successProgress: ProgressBar = new ProgressBar({
        type: 'Linear',
        height: '60',
        isIndeterminate: true,
        value: 20,
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        },
    });
    successProgress.appendTo('#linearindeterminate');
    let warningsProgress: ProgressBar = new ProgressBar({
        type: 'Linear',
        height: '60',
        value: 40,
        secondaryProgress: 60,
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        },
    });
    warningsProgress.appendTo('#linearbuffer');
    let errorProgress: ProgressBar = new ProgressBar({
        type: 'Linear',
        height: '60',
        segmentCount: 8,
        value: 100,
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        },
    });
    errorProgress.appendTo('#linearsegment');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="row linear-parent">
            <div id="lineardeterminate" class="linear-progress"></div>
            <div id="linearindeterminate" class="linear-progress"></div>
            <div id="linearbuffer" class="linear-progress"></div>  
            <div id="linearsegment" class="linear-progress"></div>      
       </div>
    </div>
</body>

</html>

Circular

Set type to Circular to get the circular progress bar. It also support secondary progress and different mode of progress.

Source
Preview
index.ts
index.html
Copied to clipboard
import { ProgressBar } from '@syncfusion/ej2-progressbar';

    let uploadProgress: ProgressBar = new ProgressBar({
        type: 'Circular',
        height: '60',
        value: 100,
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        }
    });
    uploadProgress.appendTo('#lineardeterminate');
    let successProgress: ProgressBar = new ProgressBar({
        type: 'Circular',
        height: '60',
        isIndeterminate: true,
        value: 20,
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        },
    });
    successProgress.appendTo('#linearindeterminate');
    let warningsProgress: ProgressBar = new ProgressBar({
        type: 'Circular',
        height: '60',
        value: 40,
        secondaryProgress: 60,
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        },
    });
    warningsProgress.appendTo('#linearbuffer');
    let errorProgress: ProgressBar = new ProgressBar({
        type: 'Circular',
        height: '60',
        segmentCount: 8,
        value: 100,
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        },
    });
    errorProgress.appendTo('#linearsegment');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="row linear-parent">
            <div id="lineardeterminate" class="linear-progress"></div>
            <div id="linearindeterminate" class="linear-progress"></div>
            <div id="linearbuffer" class="linear-progress"></div>  
            <div id="linearsegment" class="linear-progress"></div>      
       </div>
    </div>
</body>

</html>
Contents
Contents