How to Create a Progress Bar

Posted on October 8, 2016 by J.M. Ney-Grimm

I remember the first time I encountered a progress bar on a writer’s website. I thought, “Oh, cool!”

sample progress bar I’m visually oriented, so that visual representation of the writer’s progress on his or her current work gave me a much better feel for how near (or far away) the point of completion stood.

I wondered if I would ever add a progress bar to my website, but not seriously, more as a piece of fiction about myself. 😀

Most writers didn’t (and don’t) have such bars on their websites, but every now and then I would see another. I assumed there was a “widget” or a plug-in that produced the bar, but I didn’t think about it too hard.

And then I realized last April that I wanted a progress bar for my work in progress.

I thought about searching among the WordPress plug-ins for one that creates a progress bar, but…

I feel a little embarrassed to admit it, but I’ve forgotten how one does this! The last time I was mucking about with plug-ins was when I set up this website in February 2012, more than 4 years ago. I remember none of the details. I’m sure I could figure it out again. At some point, I’ll probably have to. There will be something I decide I want for my site that cannot be done in any other way.

But I decided to try Google first for the progress bar.

Almost immediately, the results turned up someone’s blog post with the HTML code that would do the job. It seemed very straight forward, so I dove in.

The blogger’s example progress bar was orange on black, and the code looked like –

Before I show you, let me say, “Don’t panic!” I’m going to explain each piece. And the HTML is quite a short string. 😀

The HTML

This is the visual that the HTML produces:

Now, you’ll notice that this black and orange bar is a lot longer than the blue bar in my sidebar. That’s because the HTML code does not specify the length, so it simply extends to the edges of the text window.

The text window for the blog post is much wider than the text window for the sidebar, so we get a longer bar.

I don’t like the l-o-n-g progress bar, so if I had been planning to use it in a blog post pinned to the top of my blog, I would have searched for a way to control the length of the progress bar. Because I was planning on putting it in the sidebar, I didn’t need that. So I didn’t go searching. 😀

Now, let’s look at the different pieces of that HTML string.

Two Pieces of HTML

It is basically two pieces. The beginning of the first piece is <div. The beginning of the second piece is indicated by that same little bit: <div.

In HTML, every piece has to have the beginning indicated and the end indicated.

So the end of each of these pieces is indicated as </div>

Here’s the code with those beginnings and endings highlighted.

So what about those two pieces? What’s in them?

THE FIRST PIECE

This is the first piece:

The first piece gives the black background for the progress bar.

Now I am not – not – well versed in using HTML. I’ve picked up what I need to know by looking at the HTML windows of my blog posts. And that’s it. I’ve never taken a class. I’ve never even read a book on the subject!

Which means I won’t be able to explain the way a more informed HTML-user would. But I can explain enough so that you should be able to get your own progress bar in your own sidebar to look the way you want it to.

The Identifier

So, in the first piece, the id=”progressbar” is probably simply an identifier, telling the computer, “Hey! This piece here is the progress bar.” Or, it might also tell the computer something about the basic shape of the element – long and thin and straight.

Those of you who do understand HTML are probably laughing right now and thinking, “Does she really think that? Could anybody possibly be so ignorant?”

Well, yes. Someone could, and I am. But, never mind. 😀

The Color

Next comes style=”background-color:#000000;

Now I do know what this does. It controls the color of the the background of the bar. #000000 is black.

Next bit, please!

The Shape of the Corners

border-radius:6px;

This controls the corners of the bar. My bar has rounded corners. But if you wanted square corners, you get them by changing 6px (6 pixels) to 0px (0 pixels).

Let’s see what that looks like.

Here it is with 3 pixel corners.

And with 6 pixel corners:

The Thickness

padding:3px; controls how much of the background shows around the edges of the ever-changing orange part of the progress bar. Change that 3px (3 pixels) to 0px (0 pixels) and the border goes away altogether.

Change the 3px to 6px (6 pixels), and the border gets very thick.

I like the 3 pixel border.

That’s the whole of the first piece.

A List of the Code

Indicator of the beginning <div
Identifier id=”progressbar”
Background color style=”background-color:#000000;
Corner shape border-radius:6px;
Border thickness padding:3px;
The end of the beginning (a greater-than sign) >

A space separates the beginning indicator <div and the identifier id=”progressbar”

Semi-colons ; separate the three pieces of the “style”: color, corner shape, and border thickness.

And a greater-than sign > caps off the whole description.

I always reproduce those separators exactly! If you accidentally omit one, the HTML won’t work the way it is supposed to, and the image on your website won’t be what you intend.

There’s the first piece as a whole.

THE SECOND PIECE

Now let’s look at the second piece.

The second piece is the ever-changing orange that grows longer as you write more words or shorter when you cut a few out.

<div indicates the beginning. Or more accurately, the beginning of the beginning!

Color, Take 2

Next!

style=”background-color:#f96604;

That’s the color. #f96604 is orange.

And next!

The Width

width:75%;

Ah! That’s the bit that controls how much of the black background is covered by the orange. Each time I updated my progress bar, I had to do a bit of math.

When I first put up the bar, I’d written 4,000 words. And I estimated that the book would be 160,000 words long.

4,000 ÷ 160,000 = .025

.025 x 100 = 2.5%

So, instead of width:75%; I needed width:2.5%;

It was exciting when I changed that width:2.5%; to width:5%; at the end of the week!

The Height

Next bit!

height:10px;

It controls how thick the overall progress bar is. If you change height:10px; to height:4px;, it gets very thin.

If you change height:10px; to height:20px;, it gets very thick.

I like height:10px; (10 pixels) best.

The Shape of the Corners, Take 2

Next bit!

border-radius:4px;

This controls the shape of the corners of the orange bar.

Change border-radius:4px; to border-radius:0px; and the corners become square.

Let’s try border-radius:3px;

Hmm. I think I like 3 pixels better than 4 pixels. I didn’t tinker this much with the code when I was setting up my own progress bar. I’m going to try 3 pixels when I finish writing this blog post. 😀

And that was the last bit of the second piece.

A List of the Code, Take 2

Here are all the bits that make up the second piece.

Indicator of the beginning of the second piece <div
Background color style=”background-color:#f96604;
Width width:75%;
Corner shape border-radius:4px;
The end of the beginning of the second piece (a greater-than sign) >

However, it’s not quite the end of the HTML code.

Putting It All Together

We have the first piece.

We have the second piece.

But each of those only just describes the start of each piece. We must also tell the computer, “Okay, that’s enough. End it here.

And each piece needs its very own “End it here.” They can’t and won’t share! 😀

</div></div>

That gives us the whole thing, if we’re okay with orange on black. I wasn’t.

I wanted something that would blend better with the other colors on my website. I liked the idea of dark blue on pale blue. Since #000000 was black, and #f96604 was orange, what numbers would yield the blues that I wanted?

CONTROLLING THE COLORS

I did some searching and discovered that the whole rainbow of web colors is described by numbers called “color hex codes.” Each is composed of a combination of letters and numbers, six of them. And there are web sites were you can match up the color and the number.

I googled and found one of these sites: http://www.color-hex.com/.

The Color Picker

The top navigation bar at http://www.color-hex.com has something labeled “get info.” I clicked the triangle next to that label, and a color picker appeared.

color picker at color-hex.com

Choosing a Pale Blue

I clicked around on it until I arrived at a light blue that looked good. The hex code for it #dff0fd appeared in the little info box. I copied it and pasted it into the HTML piece that controlled the background of my own progress bar.

Light blue on the color picker

The orange on the light blue background does not look good to my eye! Of course, we’re only halfway to what I want.

Choosing a Darker Blue

I clicked around on the color picker some more, until I arrived at a darker blue that looked good. Then I copied and pasted that number #1b8be0 into the HTML piece that controlled the “orange” part of my progress bar.

Dark blue on the color picker

YIPPEE!

I finished the first draft of my WIP and sent it off to my first reader this week!

I feel a little lost. It’s time to start work on the cover – and I’ve been searching for the right images for it – but I’m already missing the writing.

I think I’m going to treat myself to writing the short story that’s tugging at my inner artist while I work on the cover.

Let’s see that progress bar with 100%.

140,712 of 140,712 words

And there you have it! More than you ever wanted to know about HTML and progress bars! 😀

HTML to Copy and Paste

On the chance that you want a blue-on-blue progress bar for your website, here’s the complete HTML. Feel free to copy and paste. Remember to change the 75% to the percentage for your WIP!

For more about blogging:
Why I Wanted a Progress Bar
Why Create a Site Map?
Slow Blogging and Other Variations
SPAM Deluge

Slow Blogging and Other Variations

Posted on May 27, 2016 by J.M. Ney-Grimm

Several years ago I read a humorous blog post by comedic mystery writer Anne R. Allen about “slow blogging.” I laughed and enjoyed it, but I was also relieved. Back in 2012, most successful bloggers were recommending that anyone who wrote a blog should post something new every day.

I’d never attempted that schedule. I knew I’d spend all my creative energy on my blog and have nothing left for writing my novels. But I worried about my choice to post something new only once a week.

Ms. Allen’s thoughts on slow blogging reassured me.

She listed eight benefits to less frequent blogging, some more serious than others, but the gist of it was that you’d probably have an active blog for many more years if you paced yourself, you wouldn’t overwhelm your blog readers, you’d enjoy it more, you’d have time and energy for writing novels, and that quality over quantity would draw an audience.

With Ms. Allen’s bolstering behind me, I carried on posting once a week, missing only a few times when a cold virus laid me low or a family emergency pulled me away.

Then, in the spring of 2015, I found myself head down in my doorstopper novel Fate’s Door. I had four other stories that I planned to publish on the same day that I released Fate, and it had been over a year since I released anything new.

I didn’t want to take any time away from the novel.

So I didn’t. My blog languished while I wrote 2,000 – 3,000 words a day of fiction. And I refused to feel guilty. Surely, when you were on a hot deadline, skipping the weekly blog post was the very essence of slow blogging.

I finished the novel at the end of July and sent it off to my first reader.

Then I returned to writing blog posts with what seemed pent up ideas and vigor. Not only did I write that week’s post, but I wrote extras to have ready when my first reader gave me her feedback and I dove back into the novel to revise it. I ended up with more than a dozen blog posts “in the bank” by the time I’d completed two revision passes on Fate, prepped all five books for release, and then clicked the publish buttons on Amazon.

I envisioned those extra blog posts as lasting through a good portion of the time it took me to get well started on my next novel. Especially since I felt moved to write a new addition to my banked posts every now and then.

We all know what happens when plans meet reality.

In my case, the retina of my left eye tore, taking me out of the writing game completely for a while. Then I discovered that my next novel required a lot more research and world building than I’d realized. And here I am, nearly 40,000 words into that novel (which feels great, btw) and every single one of those banked blog posts is up and live for you to read. 😀

(Except the one announcing the paperback edition of Fate’s Door, which (a) can’t be posted until that paperback is available – soon, and (b) probably won’t ever be posted, because I’d written of the the newly released novellas making good stocking stuffers and the new novels being great for under the tree. Yes, it was December then, while the Fate paperback will be released this June. I’ll need to draft a new announcement.)

My deadline for Tally the Betrayals is not nearly so pressing as the the one for Fate’s Door. But I’m totally immersed in the world – the Bronze Age of my North-lands – and I don’t want to take time away from Tally to research the blog posts I have swirling in the back of my mind.

I’ve already been a bit erratic in posting my last few posts, waiting until Saturday, or even the next Monday, before I clicked the “go live” button. I thought about skipping this week’s post altogether.

But then I realized I could give you all a head’s up. Tell you that I’m head down in Tally and that blog posts may be sporadic for a bit. I enjoy blogging a lot. But right now, Tally has me in its grip. 😀

ETA: In the comments below, Anne R. Allen – author of the post on slow blogging that I mention above – said: “I guess maybe it’s time I blog about blogging again.” While I was reading her blog a few days ago, I discovered that she’d made good on that promise. As usual, the post was excellent, I’ll share the link: What Should an Author Blog About?

For more about blogging from me:
Copyright Statement for My Website
Why Create a Site Map?
SPAM Deluge
New Home Page