Visually Track Your Reading With a Progress Bar

Recently, I had the idea of tracking the progress of the books I’m reading and displaying this in a nice progress bar accompanying the book, so at a glance I can see where I’m at. Just a little bit of fun and it turned out great so I’ll share here how I did it.

Here is the finished book with progress bar.

JavaScript Progress Bar

Step 1: Create The Graphics

Create the progress bar in your graphics editor of choice to look something similar like mine. Note, I have only created a single image with both the greyed out style and blue highlighted style. You could create two different images, but I prefer this way. The progress image will be repeatable so we only need to create one “bar” with 3px of white space to the right. The size of the book image I used is 239px in width and the height is 330px.

Progress Bar

JavaScript Book

Step 2: Create The Markup

<div class="book">
   <img alt="My Book" src="path/to/image.png" width="240" height="330" />
   <div class="progress_bar">
      <span style="width: 0%"></span>
   </div>
</div>

The markup is very basic and only consists of a div with a book class, holding the image of your book and the progress bar code.

Step 3: Style Er’ Up

Now we need to actually make it look like the final example above by styling our markup.

.book { 
   position: relative;
   width: 239px;
   height: 330px;
}
   .book img {
      position: absolute;
      width: 239px;
   }
      .book .progress_bar { 
         background: url(path/to/image.png) 3px -34px repeat-x;
         position: absolute;
         padding: 3px;
         bottom: 0;
         width: 231px;
         border: 1px solid #ccc;
      } 
         .book .progress_bar span {
            background: url(path/to/image.png) 0px 0px repeat-x;
            display: block;
            height: 34px;
            text-indent: -9999px;
         }

So, how exactly does this work? Well, by default, the .progress_bar div displays the grey side of the progress image repeating horizontally. This is where the 3px -34px part comes in. The 3px pushes the progress image to the left by 3 pixels. The -34 pixels, shows the bottom part of the progress image. Now, the span is the blue part of the image. So, this is just overlayed on the grey background. When you add a percentage value to the span, it fills that width and covers the underneath grey area with the blue background.

Now, how would we accurately tell how far we have read a book? We need some PHP to do this dynamically.

Step 4: Make It Dynamic with PHP

<?php 
 
// $page_end_num = how many pages are in your book
$page_end_num = 257;
 
// $page_current_num = The current page of the book you are on
$page_current_num = 62;
 
// If the above variables are not empty, create
// formula to work out percentage value
if($page_end_num != '' && $page_current_num != ''): 
   $pages_left = $page_end_num - $page_current_num;
   $percentage_not_read = round($pages_left/$page_end_num*100);
   $percentage_read = 100 - $percentage_not_read;
// Else make $percentage_read value 0
else: 
   $percentage_read = 0;
endif; ?>
<div class="progress_bar">
   <span style="width: <?php echo $percentage_read; ?>%"></span>
</div>

That’s about it. Any questions, just ask.

Check out the demo

2 Comments

  1. Henry Hu - February 7, 2013 at 4:11 pm

    I discovered your blog from Graphicriver’s Forum. This idea is really cool! The way you use repeated background images inspires me a lot!

    • Keith - February 7, 2013 at 4:15 pm

      Cheers Henry!

Leave a Reply