Free Stuff

Free Twitch on-screen loading bar

featured-loadingbar

I didn’t really have time to write a long form article for today (bunch of things going on) so Instead I’m going to give you this free on-screen loading bar. I’ll go over how to change the colors and how to change the timing for it. You don’t need any prior understanding of CSS or HTML to use it, however it can help.

Download now for free

Change colors

Change the border color

NoLay Twitch branding starting

We’re going from these colors

To be able to change colors you need a text editor similar to Notepad, so nothing like Word, LiberOffice or OpenOffice. It has to be able to edit text without adding formatting. I usually use Atom to edit my HTML/CSS or any other code and it’s free/open source so it’s a good start.

In the download you’ll find two files: start.html and style.css. You need to open style.css in your text editor of choice, I’m going to drag and drop both files into Atom to be able to see the numbers for each line.

When you open it up in Atom you’ll see a bunch of text and number next to those. I would also advise you to open up start.html in your browser so you can see the change you make work.

If you go down to line 17 you’ll find the following code:
#progressbar {
height: 16px;
background-color: #00fff6;
padding: 0px;
margin: 0px;
border: 8px #00fff6 double;
clear: both;
}

RhinoQT Twitch Branding Starting

These are the similar colors we’re making

Here’s where you can make changes to the outer side of the loading bar colors. To actually change the color of the border you need to change both the background color and border color. This is important since for some reason I decided to use a technique to get a bar inside this bar to work… I actually can’t remember exactly why. Nonetheless you can enter a HEX code, you can actually google “HEX color picker” and you’ll get a color picker where you can see whatever color you might want. You can also use regular name colors like: red. You do need to replace the whole #00FFF6 otherwise it won’t work.

If we want to change the outer border to be black we can do it in two ways:

background-color: #000000;
border: 8px #000000 double;

or

background-color: black;
border: 8px black double;

Both will give you a black border around the loading bar.

Change the loading bar

If you want to change the moving bar you need to yet again open style.css in Atom go to line 26 and look for the following code:

#progress {
background: #ff19d5; /*-- Color of the bar --*/
height: 15px;
width: 0%;
max-width: 100%;
float: left;
-webkit-animation: progress 900s 1 forwards;
-moz-animation: progress 900s 1 forwards;
-ms-animation: progress 900s 1 forwards;
animation: progress 900s 1 forwards;
}

Here you have “background: #ff19d5;” that you need to change. If we want to make it yellow we can, again, use either shorthand or a HEX code. To get it yellow we can do the two following ways:

background: #ffff00;

or

background: yellow;

While it says that you’re changing the background color it’s because we’re revealing the background over time in the animation.

Change the loading bar background

To change the background behind the animated loading bar we need to go to line 38, and look for the following code:

#pbaranim {
height: 15px;
width: 100%;
overflow: hidden;
background-color: #00b3ad;
}

This is starting to get familiar now right? Again all you need to edit is the “background-color: #00b3ad:”. In this case we want something that’s a few shades darker than the yellow we picked earlier so we can go to our color picker and find a color that works. In some cases you can’t use shorthand names since css can’t cover every color in the spectrum with a name. So to get the right color, in this case, we can only use HEX color like this:

background-color: #666600;

This will give our loading bar a slightly darker background making our animated bar stand out a bit more.

Change timing

The current animation is set to take 15 minutes before it reaches the end. You can of course edit this in the CSS file. Open style.css in Atom and go to line 32. Here you need to find the following code:

-webkit-animation: progress 900s 1 forwards;
-moz-animation: progress 900s 1 forwards;
-ms-animation: progress 900s 1 forwards;
animation: progress 900s 1 forwards;

This is the animation in seconds so that means that our animation goes on for 900 seconds, and that totals to 15 minutes. So by changing 15 minutes to 5 minutes all you need to do is replace 900 with 300. The code would look like this:

-webkit-animation: progress 300s 1 forwards;
-moz-animation: progress 300s 1 forwards;
-ms-animation: progress 300s 1 forwards;
animation: progress 300s 1 forwards;

Why not put this behind a paywall or “Tweet-to-download”?

It’s stupid and it’s more annoying than an ad. Instead you can feel free to thank me in any way if feels right for you. I appreciate that you’re even here and took your time to read this and there’s no need for me to force you to Tweet to get it.


Thank you for downloading and reading this this and a countdown is always included (if needed) in my Twitch branding packages. I hope that you follow me on Twitter as a thanks 🙂

And you can read what I do for partnered and non-partnered streamers in the box below!

About the author

Daniel

Daniel

Do you need Twitch branding done the right way? I've work with both partnered and non-partnered Twitch streamers and done so for over 4 years. For me this is full time and I'm dedicated to my clients and my craft. I do both branding, visual branding and brainstorming based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away. twitch.livespace.se

Leave a Comment

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close