Because I wanted a more subtle, sketchy look with thin stripes, I decided to create my own pattern that looks like this:

In order to achieve the effect I used the :before pseude-element to create the stripes as an overlay. You position it absolutely within your parent so that it fills it completely.

Basically you create a CSS3 linear gradient with transparent segments and semi-transparent black segments where you want the stripes to be. This way the stripes would always appear in the color of the parent element. You rotate the gradient to the angle you want (in my case 45 degrees). By using gradient segments that start and stop at the same point you get a hard line instead of a gradient between the colors.

You can adjust the width of the stripes by changing the gradient segments and the background size.

We needed a representation of the current completeness of an entry – so no animations and more of a flat overall look and feel. And the text should be readable both above a full bar and the empty bar-wrapper.

In order to be able to adjust all compontents of the bar I created a SASS mixin that allows me to create bars of different colors and sizes. I can set the following variables:

size (height) of the bar

color of the actual bar-meter

color of the text and the text-shadow

background color of the bar-wrapper

You need an html parent element that is the bar-wrapper and an child-element that get’s the inline style width set to the completeness percentage. Here is the html: