In a recent project we needed bars that represented the completeness of an entry in our portal software discoverize.
The idea was to introduce a gamification element to motivate entry owners to fill out their entry. The bars needed to allow for:
- different colors (positive, normal, negative)
- different sizes (depending on context)
- display readable text in all settings
So lets get started with the css funkiness.
Step 1: Creating Stripes with CSS3 Linear Gradients
There are quite a few resources on creating stripes with css:
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.
.stripes {
background:#5bb75b;
position:relative;
}
.stripes:before {
background-image: linear-gradient(-45deg,
rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 2%,
transparent 2%, transparent 50%,
rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) 52%,
transparent 52%, transparent);
background-size:20px 20px;
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
display:block;
z-index:3;
}
Check out the finished look (demo):
See the Pen ogRdWp by Andrej (@AndrejTelle) on CodePen.
Step 2: Creating the Progress or Completeness Bar CSS3
There a quite a few of resources for creating css bars, however they are mostly for displaying a animated progress status. Basically the user is waiting for something to happen on your page – either an upload or download or some transaction being completed.
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:
<div class="bar">
<span class="bar-meter" style="width:92%"></span>
Completeness: 92%
</div>
Here is the CSS (Sass, SCSS) needed:
// mixin definition for bar-wrapper, actual dynamic bar and text
@mixin bar($size:17px, $bar-color:#5bb75b, $text-color:#fff, $text-shadow-color:#444, $bg-color:#ddd) {
// wrapper properties
border-radius: 5px;
position:relative;
background:$bg-color;
border: solid 1px #999;
height:$size;
box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.2);
cursor:pointer;
// text properties
text-shadow:
1px 1px 1px $text-shadow-color, -1px -1px 1px $text-shadow-color,
1px -1px 1px $text-shadow-color, -1px 1px 1px $text-shadow-color,
1px 1px 2px $text-shadow-color, 1px 2px 2px $text-shadow-color,;
font-family: verdana;
position:relative;
z-index:2;
color:$text-color;
white-space:nowrap;
font-size:$size/1.6;
display:block;
text-align:center;
letter-spacing:0.5px;
line-height:1.7;
// actual dynamic bar
.bar-meter {background-image:linear-gradient(lighten($bar-color,7), darken($bar-color,7));
border-radius:5px 0 0 5px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
border:solid 1px rgba(0,0,0,0.35);
border-right: solid 1px rgba(0,0,0,0.45);
border-bottom:solid 1px rgba(0,0,0,0.45);
display:block;
height:100%;
position:absolute;
left:0;
top:0;
z-index:-1;
}
// stripes on dynamic bar
.bar-meter:before {
background-image: linear-gradient(-45deg,
rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 2%,
transparent 2%, transparent 50%,
rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) 52%,
transparent 52%, transparent);
background-size:16px 16px;
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
display:block;
z-index:3;
}
}
And then you call the mixin on your bar-element and define the variables (size, bar-color, text-color, text-shadow, bar-background) you want:
.bar-1 {
@include bar(36px, #5bb75b, #fff, #333, #ddd);
margin-bottom:24px;}
Here is the result with different sizes and colors according to completeness:
See the Pen NPVygb by Andrej (@AndrejTelle) on CodePen.
Check out the full completeness bar demo.
For sake of brevity I did not include vendor specific css3 prefixes. Make sure to include those for browser you need to support.
If you have any suggestions for improvements I would be glad to read them in the comments. Feel free to critique my code.
