Terminal Style Text Progress Bar In JavaScript – Ascii Loader

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"
});