Facebook style animation progress bar border in Vanilla Javascript, HTML and CSS

Whilst scrolling Facebook, I noticed a cool way to show the video progress bar, using border around the video.

In this tutorial, I've created a way to replicate this animation for fun. If you like it please use it!

Link to the YoutTube Tutorial

This is a great way to practice your Javascript and CSS, as well as add some flavour to your hosted videos on your website.

Topics Covered

Javascript

• Event Listeners
• Video API
• setProperty method
• Math.floor() function
• ternary operator

CSS

• pseuo-elements
• custom properties
• flexbox