Your code already looks pretty clean. Good work! There are only a few things I would recommend changing.
Don't define timings in CSS that should be defined in JavaScript. In this specific case using a transition made it possible to simplify the code significantly, however in a more involved example it would become problematic. What happens if one progress bar takes 2 seconds to complete, and another takes 5?
Instead of using
getElementsByClassName('cls')[0], you can usequerySelector('.cls')for more readable code. Though this can be slower, it really isn't an issue unless it is being run thousands of times per second.There is a built in
<progress>element that you may want to use.It is a good idea to wrap template elements in a
<template>element.