4 more random CSS3 progress bars. 😋
Tags: css, html, codenewbie, tutorial
Published: 2020-07-03 15:42:06

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:

{% link https://dev.to/vaibhavkhulbe/let-s-make-and-eat-those-css3-progress-bars-217a %}

{% link https://dev.to/vaibhavkhulbe/let-s-make-and-wear-those-css-3-progress-rings-2ngf %}

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 🌈

![Rainbow progress bar](https://dev-to-uploads.s3.amazonaws.com/i/sfco5km1d6cw6jvbi54p.jpg)

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.

```html
<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!

```css
.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!**

{% codepen https://codepen.io/kvaibhav01/pen/bGEYNYJ %}

---

## 2. Animated SVG Pattern Progress Bars 😎

![Pattern progress bars](https://dev-to-uploads.s3.amazonaws.com/i/g3oza0ne5pvfsdny2q86.jpg)

We'll harness the power of SVGs to make these two bars. Which, uh, look like monument structures for some reason...

**Mark it up!**

```html
<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](https://www.heropatterns.com), 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](https://dev.to/vaibhavkhulbe/let-s-make-and-eat-those-css3-progress-bars-217a).

**See those patterns!**

{% codepen https://codepen.io/kvaibhav01/pen/zYrPGBp %}

---

## 3. Full-Screen Bubble Progress Bar 💦

![Bubble loader](https://dev-to-uploads.s3.amazonaws.com/i/t9kmw6k4oh811e6hfs4b.jpg)

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!**

```html
    <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`](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) property which naturally blends this with its parent element!

```css
.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!**

{% codepen https://codepen.io/kvaibhav01/pen/PoZOBKp %}

---

## Animated Popsicle Progress Bar 🍧

![Popsicle bar](https://dev-to-uploads.s3.amazonaws.com/i/89g4eup8eo00lklfv1vw.jpg)

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!

```html
<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`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) property to add some graphical filters (yes, just like you add them on your stories 😉). I've used the [`hue-rotate()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/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!**

{% codepen https://codepen.io/kvaibhav01/pen/wvMpzKm %}

---

_Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)_

---

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">We&#39;ll just leave a link to our own documentation and hope you make the wise decision next time you open up <a href="https://twitter.com/code?ref_src=twsrc%5Etfw">@Code</a>... <a href="https://t.co/ZyekVEKqwl">https://t.co/ZyekVEKqwl</a> 😅<br><br>Image source: <a href="https://t.co/rhxwRDAQlH">https://t.co/rhxwRDAQlH</a><a href="https://twitter.com/hashtag/DevHumour?src=hash&amp;ref_src=twsrc%5Etfw">#DevHumour</a> <a href="https://twitter.com/hashtag/Programmer?src=hash&amp;ref_src=twsrc%5Etfw">#Programmer</a> <a href="https://twitter.com/hashtag/Developer?src=hash&amp;ref_src=twsrc%5Etfw">#Developer</a> <a href="https://twitter.com/hashtag/IDE?src=hash&amp;ref_src=twsrc%5Etfw">#IDE</a> <a href="https://t.co/HdbRvnMuXw">pic.twitter.com/HdbRvnMuXw</a></p>&mdash; Microsoft Developer UK (@msdevUK) <a href="https://twitter.com/msdevUK/status/1279015535007731712?ref_src=twsrc%5Etfw">July 3, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

##### PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, [here](https://medium.com/@vaibhavkhulbe)'s my Medium profile.