October 19

NaNoWriMo Progress Bar

Posted by seditiousbroom

This is a quick and dirty php and css progress bar. Technically, the code could be used as a progress meter for almost anything (rebuilding a car, stock kept in a pantry, whatever). Consider this code freeware and use it as you wish.

  1. Right-click this file (it's plain text, so no virus worries) and save it to your documents folder or desktop.

  2. Make a few edits.

    • Change the text in quotes after book_title from "My NaNoWriMo" to "The Title of Your Book". Be sure the quotes, equal sign, and semicolon remain. Edit only the text between quotes.
    • Change the zero after book_current_wordcount to match your NaNoWriMo book's current word count. Update that number as often as you like. Remember that, unlike the book title variable, the number after book_current_wordcount does not require quotes. The semicolon must remain though.
    • Optional

      • Change the word meter's border in the style section. The color code is just below the CSS comment: Change border color here
      • Change the color of the word meter itself in the style section as well. The color code is just below the CSS comment: Change progress bar color here

  3. Put the code on your web site. That can be done in several ways. The most common are:

    • Copy+paste your modified code (with the name of your book, etc.) into a spot on your blog's sidebar. Add a header if you like.
    • Save the code as book_progress_1.php (or a similar name), upload the file to your server in the same place as your other template files, and include book_progress_1.php in your sidebar: