Equalizer Animation Using JavaScript

When your browser displays a webpage on screen it uses 3 different programming languages called HTML, CSS and JavaScript. We call the combination of these three languages “client-side web technologies”.

Each of the three language has its own syntax and purpose:

• HTML uses <tags> and its purpose is to add content on the page such as text, pictures, and video clips.
• CSS is used to customise the look and feel of the page by defining the position of each element on the page, defining the layout of the page as well as formatting text, pictures and other components on the page.
• JavaScript is used to add user interaction to the page. JavaScript can be linked to HTML tags through various events such as the onClick event of a button.

In this challenge we are using JavaScript to create a frame-based animation. To do so we will use the setTimeOut() function to run our own javascript function called animate() every 50ms.

This is the line of code used to repeat the code used to refresh the equalizer every 50ms:

setTimeout(animate, 50);

Full Code

See the Pen Equalizer Animation by 101 Computing (@101Computing) on CodePen.

Your Challenge

Adapt this code to create a horizontal progress bar animation that expands from 0 to 100% progressively over 5 seconds. You can then make the animation loop by starting again at 0% when it reaches 100%.