After yesterday’s fun with creating an HTML5-based progress meter for AutoCAD, today we’re going to have some more fun styling it with CSS.
To recap, here’s the progress meter that comes “out of the box”, with the default styling from Chromium on Windows.
The first thing we need to do for our various changes is to use CSS to disable the default styling, at which point we can then use CSS to override it.
progress {
width: 100%;
-webkit-appearance: none;
}
Here’s how our progress meter looks when unstyled:
Now that it’s stripped bare, we can apply some styling to make it look as we want. For inspiration I started with some code from this page:
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(
-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0, 0, 0, .1) 66%, transparent 66%
),
-webkit-linear-gradient(
top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)
),
-webkit-linear-gradient(left, #09c, #f44);
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
Which makes it nice and colorful, but for some reason makes me think of licorice.
So to see what difference certain tweaks make, I changed the first colour in the 2nd “-webkit-linear-gradient” to #ccc and the second to #fff. This washed the colours away:
For the next iteration I borrowed from this page, which helped add some warmth back in:
From there I decided to try the blue-within-blue (yes, that’s a Dune reference ;-) styling used by AutoCAD’s standard progress meter. I didn’t manage to get the exact colours, but they look OK:
Then I decided to round off the corners, which is a simple matter of setting the border-radius to 50px in the main progress meter style but also to add a style for the background doing much the same:
progress::-webkit-progress-bar {
background: gray;
border-radius: 50px;
padding: 0px;
box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
}
At this point things were shaping up nicely. The final touch was to replicate the same kind of barber’s pole striping to the background, making it look like a striped reservoir filling with water. Overall it’s an effect I like a lot. And you can very easily tweak this to better suit your own application’s requirements, of course.
Here’s the completed CSS which can be pasted into the <style> element in yesterday’s post (or placed in its own file and referenced from the HTML page, if you prefer that approach):
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(
-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0, 0, 0, .1) 66%, transparent 66%
),
-webkit-linear-gradient(
top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)
),
-webkit-linear-gradient(left, #335EC4, #1F71F4);
border-radius: 50px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
progress::-webkit-progress-bar {
background-image:
-webkit-linear-gradient(
-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0, 0, 0, .1) 66%, transparent 66%
),
-webkit-linear-gradient(
top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)
),
-webkit-linear-gradient(left, #333, #666);
border-radius: 50px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
body {
overflow: hidden;
width: 98%;
height: 98%;
}
hidden {
display: none;
}
progress {
width: 100%;
-webkit-appearance: none;
}
.td-center {
text-align: center;
}
.td-right {
text-align: right;
}
.center-div {
width: 100%;
padding: 25% 0;
}
div {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;
font-weight: bold;
}
Next week I’m hitting the slopes with my family as the kids are off school, the reason I’m not able to make it across to REAL 2015. Hopefully I’ll get the chance to post to this blog at least once, but there’s some chance I’ll end up taking the whole week off.
