Annotation and label in JavaScript ProgressBar control

06 Jun 2023 / 1 minute to read

Annotation

In the circular progress bar, you can add any view to the center using the Content property in annotation.

For example, you can include add, start, or pause button to control the progress. You can also add an image that indicates the actual task in progress or add custom text that conveys how far the task is completed.

Source

Preview

index.ts

index.html

import { ProgressBar, ProgressAnnotation } from "@syncfusion/ej2-progressbar";
ProgressBar.Inject(ProgressAnnotation);

let percentageProgress: ProgressBar = new ProgressBar({
  type: "Circular",
  innerRadius: "190%",
  trackThickness: 80,
  cornerRadius: "Round",
  trackColor: "#FFD939",
  annotations: [
    {
      content:
        '<div id="point1" style="font-size:20px;font-weight:bold;color:#ffffff;fill:#ffffff"><span>60%</span></div>'
    }
  ]
});
percentageProgress.appendTo("#percentage");

<!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="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/material.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="percentage"></div>     
       </div>
    </div>
</body>

</html>

Label

You can show the progress value in both linear and circular progress bar using showProgressValue property.

Source

Preview

index.ts

index.html

import { ProgressBar, ITextRenderEventArgs } from "@syncfusion/ej2-progressbar";

let percentageProgress: ProgressBar = new ProgressBar({
        type: 'Linear',
        trackThickness: 24,
        progressThickness: 24,
        value: 50,
        showProgressValue: true,
        labelStyle: {
            color: '#FFFFFF'
        },
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        },
        textRender: (args: ITextRenderEventArgs) => {
            args.text = '50';
        }
    });
    percentageProgress.appendTo('#percentage');

<!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="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/material.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="percentage"></div>     
       </div>
    </div>
</body>

</html>

Contents

Annotation
Label

Contents

Annotation
Label