Flexible Progress Bar Using SVG And Plain JavaScript – loading-Bar

Category: Javascript , Loading , Recommended | December 23, 2020
Views Total:5,010 views
Official Page:Go to website
Last Update:December 23, 2020


Flexible Progress Bar Using SVG And Plain JavaScript – loading-Bar


loading-Bar is a JavaScript library for creating highly customizable progress bars to visualizing loading status by filling SVG shapes.

How to use it:

1. Load the loading-Bar’s JavaScript and Stylesheet in the document.

<link rel="stylesheet" href="loading-bar.css" />
<script src="loading-bar.js"></script>

2. Create a basic SVG ‘Line’ progress bar.

// 60%
<div class="ldBar" data-value="60"></div>

3. Or render a progress bar in a given container using JavaScript.

var myBar = new ldBar("#myContainer");
// or
var myBar = document.getElementById('myContainer').ldBar;

5. Display a label inside the progress bar.

<div class="ldBar label-center" data-value="60"></div>

4. Apply custom styles to the progress bar.

.ldBar path.mainline {
  /* your own styles here */
.ldBar path.baseline {
  /* your own styles here */
.ldBar-label {
  /* your own styles here */

5. Built-in presets:

  • line
  • fan
  • circle
  • bubble
  • rainbow
  • energy
  • stripe
  • text
<div class="ldBar label-center" data-value="50" data-preset="fan">

6. All possible data attributes to config the progress bar.

  • data-type: Progress type. stroke or fill
  • data-fill-dir: Growth direction of fill type progress bar. ttb – top to bottom, btt – bottom to top, ltr – left to right, or rtl – right to left
  • data-stroke-dir: Growth direction of stroke type progress bar. normal or reverse
  • data-img: Custom SVG image
  • data-path: SVG Path command
  • data-fill: Fill color, pattern or image when using a fill type progress bar with custom data-path. could be image, generated patterns or colors.
  • data-fill-background: Fill color of the background shape in fill type progress bar.
  • data-fill-background-extrude: Size of the background shape in fill type progress bar.
  • data-stroke: Stroke color or pattern.
  • data-stroke-width: Stroke width of the progress bar.
  • data-stroke-trail: Trail color.
  • data-stroke-trail-width: Trail width.
  • data-pattern-size: Specify pattern size; e.g., 100
  • data-img-size: Specify image size; e.g., 200,100
  • data-min: Minimal value
  • data-max: Maximal value
  • data-precision: Control how values are rounded. e.g., “0.01” rounds values to second decimal place.
  • data-duration: Bar animation duration.
  • data-transition-in: Animate the bar for entering transition, when value is set by data-value.

7. Or pass the options to the ldBar function.

var myBar = new ldBar(".myContainer", {
    "type": 'stroke',
    "img": '',
    "path": 'M10 10L90 10M90 8M90 12',
    "fill-dir": 'btt',
    "fill": '#25b',
    "fill-background": '#ddd',
    "fill-background-extrude": 3,
    "pattern-size": null,
    "stroke-dir": 'normal',
    "stroke": '#25b',
    "stroke-width": '3',
    "stroke-trail": '#ddd',
    "stroke-trail-width": 0.5,
    "duration": 1,
    "easing": 'linear',
    "value": 0,
    "img-size": null,
    "bbox": null,
    "set-dim": true,
    "aspect-ratio": "xMidYMid",
    "transition-in": false,
    "min": 0,
    "max": 100,
    "precision": 0,
    "padding": undefined

8. Update the progress bar with or without animation.

  60, // 60%
  false // disable animation

You Might Be Interested In:

Leave a Reply