CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
Taras Kovalenko
Taras Kovalenko

Reputation: 2393

Customize progress bar on JS

I use very simple progress bar with bootstarp.

But I would like to create custom progress bar like this: enter image description here

But I don't know how to create such progress bar. Maybe ready-to-use JS library exists or something else, for creating progress bar.

Upvotes: 2

Views: 158

Answers (1)

moonknight
moonknight

Reputation: 334

You can do something like this:

  • Use your meme image so that the face is transparent inside and white outside (or use your background color)
  • Use a colored div (blue for example) which has the same size of your meme image, and put it hidden under your meme image
  • On progress, slide the image to the top (using javascript) behind your meme (using z-index)
  • You obtain your effect

Upvotes: 3

Related Questions