Creating a Custom YouTube “Sparkbar”

I received a question about this a little while ago and I finally got around to making a blog post about it. The person was asking about making a custom YouTube percentage bar like the one you see on videos right above the thumbs up and thumbs down icons. Intrigued I looked at the code and boiled it down to something that perhaps you all could use for a project… whether it be based off of values generated in PHP or completely client-side. YouTube called this bar a “Sparkbar” for a reason that I am yet to be aware of. Looks like a regular bar to me. So here is a small demo.

Here we create a container div that we call a sparkbar and within it are two divs side by side. One is for likes and is colored green and the other is gray. I used the same colors that YouTube uses but you can easily change the styling (below) to make it match your theme. The styling for all these divs is below in the CSS and is very simple. Below the sparkbar I created a simple input div so that you can enter a percentage value (from 0 – 100) and update the bar by clicking the button.

To get the divs to sit next to one another, we float them left and put them into the sparkbar which is also floated left. For display purposes I added some margins just so it is not butting up against the top of a window or anything. You can feel free to remove them in the fiddle I list below. Now to control the overall width of the sparkbar all you have to do is change the CSS width and the bars themselves will adjust since they are percentage based. You could even make the sparkbar itself percentage based for a lot of additional flexibility.

We added a simple click handler for the button which reads from the percentage textbox to get a value. We parse that into an integer and based on the width of the sparkbar container, we can create a percentage of the likes. Subtracting that value from 100 of course will then give us the percentage of dislikes. We then set their widths using a little jQuery .css() calling and there you go, the sparkbar is created.

If you play around with the fiddle I have shown below you can also think about adding more than two divs and create percentage bars that are based on multiple percentage values. All you would have to do for this is create other divs that float alongside the dislikes div. As long as all the divs equal up to 100% you should be able to fit them into the same bar. I hope you enjoy this fiddle and feel free to let me know your input in the comments below.

About The Author

Martyr2 is the founder of the Coders Lexicon and author of the new ebooks "The Programmers Idea Book" and "Diagnosing the Problem" . He has been a programmer for over 18 years. He works for a hot application development company in Vancouver Canada which service some of the biggest telecoms in the world. He has won numerous awards for his mentoring in software development and contributes regularly to several communities around the web. He is an expert in numerous languages including .NET, PHP, C/C++, Java and more.

Yup, the value source is independent of how we are using it here. You could write a quick PHP script to take some kind of ID, pull the percentage value and display it here in this sparkbar. This value can be based on user reviews or any other criteria you like. All this code needs is the actual value. How that value is created and retrieved is up to your design.

About the Lexicon

The brain child of Martyr2, Dream.In.Code Mentor and veteran programmer, the Coders Lexicon is a website dedicated to the advancement of computer programming and technology. It offers advice, coding resources and references to cover web and desktop development.