Render an animated Loading Bar in Unicode characters with JavaScript & HTML

▰▰▰▱▱ LOADING…Link to open-sourced tool included.

In 1 of my most recent side projects, the crux of the technical implementation involved the transformation process to convert from 1 specific file format to another:

How to Convert a Video Clip to a GIF File with Client-side JavaScript

During file conversion, since the entire process required between ~5 to 15 seconds (depending on file size) to complete, by convention a loading.gif is usually rendered onto the web page to signal to the users its current loading status.

However instead of using CSS or static loading.gif images, this article wishes to showcase a simple but effective use of Unicode symbols to render an animated loading bar instead.

Photo by Arthur Mazi on Unsplash

Sample Loading Bar Code Snippet

JavaScript Code Snippet

const loadProgressMapper=[
  "▯▯▯▯▯▯▯▯▯▯",
  "▮▯▯▯▯▯▯▯▯▯",
  "▮▮▯▯▯▯▯▯▯▯",
  "▮▮▮▯▯▯▯▯▯▯",
  "▮▮▮▮▯▯▯▯▯▯",
  "▮▮▮▮▮▯▯▯▯▯",
  "▮▮▮▮▮▮▯▯▯▯",
  "▮▮▮▮▮▮▮▯▯▯",
  "▮▮▮▮▮▮▮▮▯▯",
  "▮▮▮▮▮▮▮▮▮▯",
  "▮▮▮▮▮▮▮▮▮▮"
];
const…