Looks like by now you're done with eating and wearing progress bars. If you haven't checked it yet, hop around with the following articles in this series:
This time though, we're gonna conclude this by making 4 cool and completely unrelated progress bars. Starting with a rainbow and ending with a popsicle!
1. Rainbow Loading Progress Bar π
This is a progress bar in the loading state. The cool thing here is that it has got a unique shape and rainbow colours.
Mark it up!
The HTML consists of:
- A container which holds the entire bar.
- The loading state element.
- The loading rainbow element.
<div class="container">
<div class="loading infinite">
<div class="loading-rainbow"></div>
</div>
</div>
Style it up!
For the container we just need to give it a suitable width. No more, no less!
For the loading state, we have the loader itself and the infinite class for the animation. This consists of the padding and the border-radius. The first is to make it look more like a solid rainbow which adds additional spacing in the element and the radius is self-explanatory.
The animation for this goes from 6 different percentage stops. These are separated with a 20% difference between each of them. The main concept of achieving the rainbow look is to add a linear-gradient from left to right. The spectrum of 6 different colours is used for the equal percentage stops. These go from green (#4cd964) to pink (#ff2d55). For each stop, what we do is change the order of the colour pattern. So if the green colour was first in the 0% (initial) mark, it goes to the last for the next stop (20%), #5ac8fa was second in 0% but comes first in 20%. This is repeated across all the percentage stops until we get an entire rainbow loading state look!
.container {
margin: 0 auto;
width: 400px;
}
.loading {
padding: 5px;
border-radius: 10%;
box-shadow: 6px 6px 16px -10px rgba(0, 0, 0, 0.85);
/* optional */
}
.infinite,
.loading-rainbow {
width: 100%;
animation: rainbow 1s infinite;
}
.loading-rainbow {
height: 15px;
}
@keyframes rainbow {
0% {
background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
}
20% {
background-image: linear-gradient(to right, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964);
}
40% {
background-image: linear-gradient(to right, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa);
}
60% {
background-image: linear-gradient(to right, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff);
}
80% {
background-image: linear-gradient(to right, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff, #7DC8E8);
}
100% {
background-image: linear-gradient(to right, #ff2d55, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6);
}
}
Watch the rainbow!
2. Animated SVG Pattern Progress Bars π
We'll harness the power of SVGs to make these two bars. Which, uh, look like monument structures for some reason...
Mark it up!
<div class="container">
<div class="progress-bar1 animate">
<span><p>Overcast over jigsaw!</p></span>
</div>
<div class="progress-bar2 animate">
<span><p>Topography over formal invitation!</p></span>
</div>
</div>
Yes, as simple it is! We just have:
- The container
div. - Under this, it has two child elements as our two bars.
- In each bar, we have a text!
Style it up!
For the parent element, we give it a display of flex. This is just in case, we need to align them side-by-side. I haven't done this but of course, you do flex-direction: row; to make it look like they're beside each other.
For both the progress bars, we must give it a relative positioning as we have a layer of the animated SVG over it. It needs to be behind this. A suitable width and height is also given.
Now we need to apply some SVG patterns, the best place you can find is over Hero Patterns, pick a colour for your background or foreground and copy the generated CSS. It gives you two values, first, a background-color and the second is the background-image. The latter is the one which gives the entire SVG code to make the desired pattern.
We select the span child of our progress bars and paste the background code of the SVG here. To make it look more like a monument structure, the inset shadows help. As for the foreground pattern, we use the :after pseudo-class making sure the content property value is empty, there is absolute positioning as this is on top of the progress bar, and the position is matched to its centre by using background-size to 50px each.
The animation is similar to what we did on the candy progress bars.
See those patterns!
3. Full-Screen Bubble Progress Bar π¦
This, but in a full-screen and as a loader. How does that sound? This is perhaps the most quirky one of the lot as we use some awesome CSS properties to make it happen.
Mark it up!
<div class="container" />
Done.
Style it up!
That container is positioned relatively and optionally we use the translate3d() function of the transform property to position it right in the middle.
That div is now made absolute so as to have the background linear-gradient on top of which we have the bubbles. Make sure the height is set to 100% to cover the entire body. To look like the entire water is in a glass body, here also inset shadow helps up. The animation is fairly simple here which goes from left to right changing its width value from 0 to 100%.
Time to add bubbles! From the :before pseudo-class, we display it as a block-level element, give it the same height, same shadow and animation. What differs is that these bubbles are nothing but a GIF from Giphy. π₯΄ We set background for this as the GIF. What's cool is we're using the mix-blend-mode property which naturally blends this with its parent element!
.container {
position: relative;
transform: translate3d(-50%, -50%, 0);
}
div {
position: absolute;
background: linear-gradient(to right, #2c4266 30%, #94acd0);
height: 100%;
animation: toLeft 5s forwards;
box-shadow: 0 0 8px 1px white inset;
}
div:before {
content: '';
display: block;
height: 100%;
background: url(https://media.giphy.com/media/f6UVXUVOyDhLRChDHe/giphy.gif);
mix-blend-mode: overlay;
box-shadow: 0 0 8px 1px white inset;
opacity: .5;
animation: toLeft 5s forwards ease-in-out;
}
@keyframes toLeft {
from {
width: 0;
}
to {
width: 100%;
}
}
Pop those bubbles!
Animated Popsicle Progress Bar π§
The sweetness comes in the form of a popsicle! This progress bar is in the state of loading so what it does it those different flavour colours moves to show this state.
Mark it up!
Here also, we've got:
- A container to hold the bar.
- The popsicle and
- The stick at the end!
<div class="container">
<div class="posicle">
<div class="stick"></div>
</div>
</div>
Style it up!
The popsicle is positioned absolutely from the container with a suitable width and height.
Next, we make that bar using both the :before and :after pseudo-classes. This has the highest z-index value amongst the other elements so as to display it over the topmost layer. The colors are made using the background-image property having the gradient value with two stops for each color at 20% difference. That means, for the red one, #da1107, the color-stop starts at 0% and ends at 20%, for the yellow one (#e0ce16), it begins with 20% and ends at 40%. This continues for the all five colors.
As for the animation, we shift the position of this element from 0 for both left-right to 500px for only left. Now we also, oppose the direction of the linear-gradient which initially moded from the right.
Now comes that little thing to the very bottom you see. A thin line which acts as a shadow to the popsicle. This is done with the :after. Give it a minimum top value, a light opacity of .5, a slightly lower z-index. Most importantly, we use the filter property to add some graphical filters (yes, just like you add them on your stories π). I've used the hue-rotate() function which accepts a certain angle value to adjust the filter accordingly.
Finally, the stick you see it just a block element with some usual values like width, height, border-radius and absolute positioning. Nothing much fancy here.
Gulp down this popsicle!
Thanks for reading, I appreciate it! Have a good day. (βΏββΏββΏ)
We'll just leave a link to our own documentation and hope you make the wise decision next time you open up @Code... https://t.co/ZyekVEKqwl π
β Microsoft Developer UK (@msdevUK) July 3, 2020
Image source: https://t.co/rhxwRDAQlH#DevHumour #Programmer #Developer #IDE pic.twitter.com/HdbRvnMuXw
Top comments (0)