Terminal Style Text Progress Bar In JavaScript – Ascii Loader

Category: Javascript , Loading | June 3, 2020
Author:lzinga
Views Total:1,767 views
Official Page:Go to website
Last Update:June 3, 2020
License:MIT

Preview:

Terminal Style Text Progress Bar In JavaScript – Ascii Loader

Description:

Ascii Loader is a pure JavaScript library to create a highly customizable text progress/loading bar as you see in a terminal console.

How to use it:

1. Download and load the Ascii Loader in the HTML file.

<script src="src/ascii-progress.js"></script>

2. Create a container to hold the text progress bar.

<div id="progressbar"></div>

3. Initialize the Ascii Loader and we’re ready to go.

var progressBar = new AsciiProgress("progressbar");

4. Update the progress.

progressbar.setValue(10);

5. Customize the loading message.

progressBar.setComment("Loading images...");

6. Customize the characters to use in the progress bar.

var progressBar = new AsciiProgress("progressbar",{
    openCharacter: "[",
    loadedCharacter: "#",
    backgroundCharacter: " ",
    closeCharacter: "]"
});

7. Customize the loading message.

var progressBar = new AsciiProgress("progressbar",{
    showComment: true,
    startingComment: " ",
    commentLocation: "bottom" // or 'top'
});

8. Customize the progress bar with the following parameters:

var progressBar = new AsciiProgress("progressbar",{
    length: 60,
    value: 0,
    completeAt: 100,
    showPercent: true,
    percentDecimalPlaces: 2,
    percentLocation: "middle"
});

You Might Be Interested In:


One thought on “Terminal Style Text Progress Bar In JavaScript – Ascii Loader

  1. Lzinga

    I am the creator of this, and im amazed you guys even managed to find this. Also as note the loader works best with a mono style font.

    Reply

Leave a Reply