Would this kind of glow effect be possible?

Question

After seeing this dribbble shot:

https://dribbble.com/shots/665300-Progress-bar

I am really wondering if it is even possible to recreate the glowing effect. Best scenario would be for it to work dynamically, maybe even flickering etc.

This could probably be done it with some kind of static semi-transparent glow but I'm left wondering if that would look any good.

How would one go about trying to make this work? Pure css or something else entirely? Ofcourse it would need to function properly in multiple browsers.

Answer 1

Assuming you're referring the the lens flare effect, I would personally use a PNG for this.

<div class="progress">
  <div class="progress-bar" style="width: 69%;"></div>
</div>

You could use .progress .progress-bar:after in your CSS to add a background-image of the glowing/lens flare graphic which, due to it being isolated in an :after selector, can be animated independantly (flickering, pulsing, you name it).

If you haven't already, check out the Progress Bar component in Bootstrap, as they have a pretty extensive set of styles and variations to get started.

Resources:

• Progress Bars: Striped