Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Posted February 24, 2014 4:20pm by

Forum Contest: Progress Bars

EDIT: This contest has ended! Congratulations to Jim Mayle for his winning entry! Our next contest is all about creating a CSS character.

Hi everybody,

It's time for a new Treehouse Forum contest! First, watch this video to learn more:

After you've watched the video, please read the details below carefully. I'm looking forward to your entries!

How to Enter: Create your progress bar entry as a "pen" on Codepen.io and then post the link to your pen as an answer to this post.

Due Date: All entries must be submitted by March 2nd at 11:45pm ET. Here's a timezone chart so you can see what time that is for your locale.

Prize: The entries will be judged by Treehouse teachers based on both design and code. One winner will receive a free month of Treehouse Gold on us! :) We'll announce the winner on March 3rd and reveal the next contest.

60 Answers

February 24, 2014 4:36pm

Awesome contest, been waiting for one like this :D

Going to start my entry!

February 24, 2014 5:20pm

HTML5 is allowed?

February 24, 2014 7:26pm

Of course, why wouldn't it be? Modern HTML is HTML5. :)

February 24, 2014 6:01pm

So... Mine was inspired by the old platform game Metal Slug. Change the value of the progress bar to escape the carnage!

P.S Unfortunately, it only works in Chrome... sigh..

February 24, 2014 9:42pm

Lol! awesome!

February 25, 2014 9:09pm

thats so cool!

February 26, 2014 11:53pm

I like it! Do you mind if I tweak this one a little bit?

February 27, 2014 6:47am

Hey Diego - not sure if it's just me, but the animation doesn't run on that one? I'm going to have a re-tweak myself anyway. I came up with some fresh ideas overnight

February 27, 2014 9:36am

Well Gee. It works in Chrome. Thanks for the heads up Sam May .

I really need to work on my cross-browser support.

February 27, 2014 5:17pm

Hey Diego -

I'm really hyped that my entry has inspired you and all, and i'm glad to see you're learning more about prefixes by playing with it, but you've pretty much hijacked my idea. No offence, and I really am flattered you like it, but it's hard for me to get excited about learning more and improving it when you've already beaten me to the punch on my own idea..

Just saying...

February 27, 2014 10:40pm

I understand. I shouldn't have done that at all. It really was your idea, and taking your idea and running off with it was not within the scope of this forum contest that emphasized originality.

I'm sorry.

Please accept this post as an apology.

Also. with the help of Chelsey on the treehouse staff, I have removed the comments with the links included.

February 28, 2014 9:35am

No worries Diego, I appreciate your understanding - and I'm not trying to stem your learning or anything, I'm just really hyped to do this one by myself - why don't you try something similar? It could be in the same vein, like perhaps a sonic the hedgehog style bar? Any thing that involves a retro platform game would work! (Mario, Sonic, etc).

February 24, 2014 8:21pm

Can i ask if there is any progress bar tutorials on treehouse at the moment?

February 24, 2014 11:46pm

We don't have any tutorials about progress bars specifically, but you should be able to figure out how to make one by combining HTML and CSS lessons.

February 25, 2014 3:40am

Any one training or video in particular?

February 27, 2014 10:48pm

Walter Aucaylle the best videos to watch would be two full modules in the CSS Foundations Deep Dive: 1. Transitions and Transforms 2. CSS Animations

There are no outright tutorials on making a progress bar, but all the tools that can be used are explained in those two full modules. It's about 1 hour 40 minutes of video, a little longer for the quizzes and knowledge tests (maybe 2 hours to 2 hours and 15 minutes).

March 1, 2014 3:38pm

In the first CSS animations video, Guil Hernandez creates a progress bar animation: http://teamtreehouse.com/library/css-foundations/css-animations/keyframe-rules-and-animation-properties-2

February 24, 2014 9:25pm

As for games, Pacman can be progress bar too! It's my first own project =)

February 24, 2014 9:33pm

Doesn't seem to be working, tried it in chrome. Just this minute finished learning animations in CSS on treehouse so been looking at your code, can work it out; looks cool mate.

February 24, 2014 9:51pm

Fixed — forgot about vendor prefixes.

February 24, 2014 9:59pm

Nice, i like it.

February 27, 2014 4:05am

Very fun.

February 24, 2014 9:30pm

I'm kinda curious, (a) can moderators participate and (b) can it be for a fundraising effort I am working on (in other words, to animate progress in getting the funds)?

February 24, 2014 11:46pm

Yes and yes! :)

February 25, 2014 4:13pm

Do Moderators work for TeamTreeHouse or are you just helpful in the Forums?

February 27, 2014 9:27pm

Tyre Pickett - Modertators are just Treehouse members that are helpful on the forum.

February 24, 2014 10:17pm

Here is my try of it Click Here.

February 24, 2014 10:42pm

I like it, well done.

February 24, 2014 11:47pm

Thanks. I have been working with progress bars for a while now so it was easy to come up with that one.

February 25, 2014 5:46pm

Dude you're not going to learn anything if you keep taking shortcuts, and using other people's work in these forum contests. It would be awesome to see you redo this, without copying from a tutorial so that you learn how to make something on your own, and make it unique. I understand wanting to just submit something to see if you can win, but this isn't the lottery where you can win by just buying a ticket. You won't win anything, and you certainly won't learn anything that way. Make it your own, instead of copying off of this http://cssdeck.com/labs/animated-progress-bar-2

February 25, 2014 6:25pm

I would like to echo Robert's sentiments. Originality is a key factor for winning entries. While I understand that "original" is a relative term, obvious copies will not be considered.

If you'd like to submit another entry that represents your own design and coding, we're happy to consider it. These contests are designed to help everyone in the Treehouse community learn how to exercise their creative thinking skills.

February 24, 2014 10:43pm

Thanks. I have been working with progress bars for a while now so it was easy to come up with that one.

February 25, 2014 1:09am

very nice

February 25, 2014 1:09am

very nice

February 25, 2014 1:09am

Thanks

February 25, 2014 4:03am

Sorry the page isn't very elaborate, but I wanted to get this entry in. I hope you like my progress bar. This is my first contest and I would consider myself still a newbie. Good luck to everyone!

February 25, 2014 4:56am

Here is my entry! http://codepen.io/benjoyce/full/HkIoq

February 25, 2014 8:31am

Not sure if I'll be able to enter this one, but would like to if I can make the time, are there are rules regarding cross browser compatibility (at work we still regularly need to support IE8).

February 25, 2014 11:19am

I've just finished my entry! There it is: http://codepen.io/robertoej/full/JoCiL. First contest, take it easy! :) Good luck everyone!

February 25, 2014 11:59am

Hey Roberto, nice entry but I noticed that you're progress bar loads past 100% ;)

February 25, 2014 12:14pm

What a shame. Thanks a lot for letting me know, James. I've fixed the bug. :)

February 25, 2014 4:04pm

Here is my entry: http://cdpn.io/cxjto

February 25, 2014 5:20pm

http://codepen.io/nousacademy/pen/ILxde

I'm a beginner!!

February 25, 2014 5:44pm

I decided to do another entry as well. check it out. Came up with the idea on the way to work.

I look forward to any feedback. I am still a newbie and want to become a proficient developer.

February 25, 2014 6:51pm

Already seeing some issues, which I believe has to do with my use of absolute positioning and also center my div.

February 26, 2014 3:23am

I like this one a lot. Good job!

February 25, 2014 7:20pm

Here are My Progress Bars: http://codepen.io/nandinigoel/pen/dqFLy Regards Nandini

February 26, 2014 12:34am

Thats Dope! for a second i was like when is it going to load had a slow moment :)

February 26, 2014 3:27am

I like the original ideas for these progress bars. The top loading bar is mesmerizing.

February 25, 2014 9:57pm

Updates made.

February 26, 2014 12:41am

I like this contest! One more progress bar: thermometer. Used actual progress element.

February 26, 2014 1:49am

You did a really good job and I like the idea with the thermometer. Excellent submission!

February 26, 2014 3:33am

I like this one also. Points for originality. :)

February 26, 2014 3:30am

I like the submissions so far.. I'm going to shoot one in as soon as I can get to my computer. Good luck everyone!

February 26, 2014 4:30pm

I have the animation going in a direction I like. Need to add the progress element... (the hard part for me). http://codepen.io/ampedpixel/pen/xbcei I used this to generate a starting point. http://cssload.net/en/ and then hacked it a bit. Is this cheating?

February 26, 2014 9:03pm

Very cool loading animation.

February 26, 2014 9:59pm

Thanks Calvin! I hope I can make it work... then it will be cool!

February 26, 2014 10:55pm

Great! I love it.

February 27, 2014 3:35am

Cute!!!

March 3, 2014 2:40am

Call me Hacky McHackerson. Code is not pretty. Added the progress element to display percentage loaded. Was hoping to have the throbbing frog phalanges stop at 100%. Couldn't make it happen. :( Love being part of this Treehouse community! There are some extremely bright and supportive people here. Awesome work everyone! http://codepen.io/ampedpixel/full/xbcei

February 26, 2014 11:39pm

Here is my first entry: Codepen

I used this as a starting point CSS Load, like Jim Mayle .

This is my first so far, I hope to have a few more in the next few hours. :)

February 27, 2014 12:56am

Creative, it lets you know that something is happening.

February 26, 2014 11:48pm

here is my try Progress Bar

February 27, 2014 12:12am

nice.

February 27, 2014 12:59am

Nice, but don't work in Firefox. But you can fix it: progress::-webkit-progress-value is the same as progress::-moz-progress-bar and progress::-webkit-progress-bar styles can be written simply in progress selector.

February 27, 2014 11:12pm

thanks Yuliya Bagriy , I will add FireFox support.

February 27, 2014 3:23am

Well, Here's my shot at this. DBZ fans will enjoy this.

Progress Bar

February 27, 2014 4:06am

Hahaha I love this.

February 27, 2014 4:09am

Good memories.

February 28, 2014 8:14pm

You were right, we loved it ;)

February 27, 2014 7:20am

Here's my entry: http://codepen.io/anon/pen/BELAx.

February 27, 2014 12:19pm

Here's my progress bar Good Luck everyone :)

March 1, 2014 2:56am

Enara, both of your bar were nice. I kind of prefer the top one though, if asked to pick.

February 27, 2014 9:29pm

I wrote this one a while back

http://codepen.io/jamesbarnett/pen/ybvLB

February 28, 2014 1:38pm

Nice. I did the obvious quick test; added boxes to see if it worked perfectly. And it did.

February 28, 2014 8:16pm

Here's my pure HTML5 and CSS3 approach.

February 28, 2014 9:56pm

Well, I updated my entry since the first iteration I knocked out very quickly at the start of the challenge. I decided to learn jQuery, seeing as I couldn't target the 'value' attribute of the progress element (Is this possible yet?). In using the progress element, I did sacrifice firefox compatibility, however I'm really happy with the result in chrome!

Here you go - escape the carnage of the loading bar!

February 28, 2014 10:24pm

Nice!!

March 1, 2014 4:20am

Great job, Sam! It's really amazing!

February 28, 2014 11:09pm

Nice work everyone.

March 1, 2014 5:07am

Here's mine. This is my first attempt at writing jQuery plugins. It basically adds progress bars below buttons. Just adding these should make a totally working "progress button": <button class="miniProgress" type="button">Another Button</button>

March 1, 2014 9:13am

Dude that is awesome

March 1, 2014 12:20pm

Very good! But you have some mistakes with -moz- (check my comment to Davit Khaburdzania).

March 1, 2014 2:05pm

Thanks, I will correct that.

March 1, 2014 4:48pm

Mine entry dost abide here - animation only works in webkit, though :\

March 1, 2014 6:41pm

@Ben Anderson -

Why not? Seems like radial gradients & keyframe animations are supported in other browsers.

http://css3clickchart.com/#radial-gradient http://css3clickchart.com/#keyframe-animations

March 1, 2014 7:04pm

Thanks for the tip, James - should be rockin now!

March 1, 2014 7:11pm

In Firefox 27 & IE 11 the animation works, but it's glitchy.

March 2, 2014 3:10am

Ben Anderson - Seems like your pen got noticed over on codepen, it's currently featured in the picks section of the codepen.io.

Imgur

March 2, 2014 3:28am

That is so cool! Yeah that was my first go. Can be viewed here. Thanks for finding this, James! I guess either version can count as a submission from me :)

March 1, 2014 11:15pm

I've also created a very basic one in CSS3/HTML only. http://cdpn.io/Dpldf

March 2, 2014 12:01am

Very pleasant design. Not overwhelming to the eyes.

March 2, 2014 2:18am

Thanks Lawrence

March 2, 2014 1:41am

Here is my entry http://cdpn.io/iDsAt

This was a very rewarding challenge. I'd like to try and submit another one just using the progress element. I don't think there's a limit to how many you can submit.

March 2, 2014 2:30am

Sweet submission. I really like how the loading changes to loaded when the progress bar completes. Of course the Tree House logo is a nice touch as well. I learned some new things reading your code. Thanks!

March 2, 2014 4:13am

Thanks Lawrence!

March 2, 2014 4:12am

All of the submissions look great. This rocks!

March 2, 2014 5:57am

I just got another idea and then I decided to shot one more. There it goes: http://codepen.io/robertoej/full/tgqzB.

March 2, 2014 7:11am

Wow, nice. Pretty cool.

March 2, 2014 7:14am

Thanks, Pedro!

March 2, 2014 10:08am

Very Cool. I love it.

March 2, 2014 10:10am

Thanks, Diego!

March 22, 2014 5:28am

This is so freaking cool

March 2, 2014 6:33am

Here's my entry: code, demo. Any feedback is much appreciated :)

March 2, 2014 7:30am

Ingenious, James! The only this is you are using an initial background for the div cherry (#b43210), and when we load the page we can see it (the div starts in the left edge of the screen). I would suggest you to use 'transparent' instead, once after an instant the background image is loaded and it doesn't show up anymore. Congratulations for the entry!

March 2, 2014 10:10am

Great idea!

March 2, 2014 8:00pm

Thanks for the feedback guys. Roberto, thanks a lot for the tip was trying to work out how to fix that! :)

March 2, 2014 7:29am

Great entries!

March 2, 2014 9:09am

Here's my entry: http://codepen.io/Kristina_doukou/pen/FobJg good luck to all

March 2, 2014 10:11am

Wow. that was beautiful.

March 2, 2014 10:13am

Thank you Diego!!!!!

March 2, 2014 11:12am

Sorry this is my entry....http://codepen.io/Kristina_doukou/pen/qHshj (its the same with the http://codepen.io/Kristina_doukou/pen/FobJg )

March 2, 2014 1:21pm

Hi there!

Just saw this contest and decided to create something funny for it. Here is my entry: http://codepen.io/frenski/full/BaLtx

March 2, 2014 8:22pm

Great job man looks awesome :)

March 2, 2014 10:48pm

WOW!

March 2, 2014 3:59pm

I had fun playing with CSS, here is mine: http://codepen.io/sylvie/full/ELHFa

March 2, 2014 6:05pm

Some killer entries I have seen! Well this is my take at it!

http://codepen.io/adhithyarkumar/full/ackiv

March 2, 2014 8:59pm

Looks great, I really like the gradients you've used on the circles, gives them a sort of 3D effect. Only thing I would do differently is get rid of the 'starting', 'loading', 'finished' labels, I think the bar on its own is enough of an indicator of where its up to... Just a thought.

Nicely done anyway :)

March 3, 2014 6:15am

Thanks James. I agree on your thought about the status indicator. Added it for extra effects :)

March 2, 2014 6:28pm

Here's mine: http://codepen.io/iZOE/pen/klufE

It's build on erb and scss/compass.

Codes are hosted on https://github.com/iZOE/zipper

Hope you like it :)

March 2, 2014 6:50pm

Wow that's so neat and simple. Really enjoyed it.

March 2, 2014 9:04pm

Very impressive, awesome job!

March 2, 2014 11:17pm

That is fantastic!

March 3, 2014 6:09am

This is the best entry so far! Amazing work!

March 3, 2014 1:01pm

THANKS for your like it. :P

March 3, 2014 5:20pm

thank you for liking mine

March 2, 2014 7:50pm

This one was my first idea, but I had no idea how to create bucket out of progress element. For now works only in webkit, can't find alternative to *.webkitAnimationPlayState.

March 2, 2014 11:19pm

Still pretty sweet!

March 2, 2014 10:26pm

Though I've only been with Tree House a month, this contest has been a very positive experience. The creativity that has been displayed here is incredible. Everyone from newbies like myself to those of you more experienced, should be proud of your entries! Because of my inexperience I almost didn't submit an entry, but am glad I did. By following the contest throughout the week and reviewing your entries, I have learned a lot and thank all of you!

Larry

March 2, 2014 11:12pm

My second entry this time using the progress bar element.

http://cdpn.io/FqGsi

March 3, 2014 1:56am

Progress bar made in HTML and CSS http://cdpn.io/ajkoL

March 3, 2014 3:28am

Here is my attempt at this challenge: http://codepen.io/anon/pen/gLtwx

March 3, 2014 3:29am

Here is my entry. (http://codepen.io/bwgoad/full/ACGgb) It only works in webkit browsers, due to the ::before and ::after pseudo-elements on the progress-bar and progress-value pseudo-elements only working in webkit.

March 3, 2014 3:43am

Hi, Here's my entry using the progress bar element. http://codepen.io/msmurthy/pen/jdtIK I am just finishing up the lessons on CSS transitions and animations. This contest came at the right time for me :) Sorry, It works only in chrome. Had a lot of issues when I tried to make it work in firefox and opera. Still trying to wrap my head around all the code involved with achieving cross bowser compatibility.

March 3, 2014 4:29pm

Hi everyone,

Well, as usual, you all did an amazing job! We're blown away by the number of high quality entries these contests have been receiving lately. It's so fun to go through each of your entries and see all the cool things you've put together. You should feel good about the experience you've gained by getting more practice with design and coding.

This week Jim Mayle has won. Congrats, Jim!

His Treehouse loading animation is interesting for both its design and its code. It uses the HTML5 progress element, it's compact enough that it can work in a large variety of contexts without need for breakpoints, and it also makes clever use of brand imagery to create a subtle animation. I've been looking at the Treehouse logo for a long time, and I don't think any of us thought to use it in this way; pretty clever. Jim also used some code as a starting point, but he modified it for his own purposes and created something original out of it. This is totally OK as long as you don't make an exact clone of something else. "Hacking" like this is part of making websites and Jim saved himself a lot of time by being resourceful, then applying his own originality on top.

March 3, 2014 8:44pm

Thank you everyone!!!! Feeling blessed to be a part of this creative community. :)

March 3, 2014 10:51pm

Great job, Jim! Congratulations!

March 3, 2014 4:32pm

Congrats Jim Mayle ! Good job!

March 3, 2014 6:32pm

Congrats Jim Mayle This is amazing work....

March 3, 2014 6:53pm

Congratulations Jim Mayle your entry was a really good piece!

March 3, 2014 8:13pm

Congrats Jim...excellent entry!!!

March 3, 2014 8:25pm

Congrats Jim Mayle!

March 4, 2014 3:45am

Congrats dude. Looks sweet. Glad to be a part of this community that has so much talent.

March 4, 2014 10:33am

That was really good, Jim Mayle! Congratulations!

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Nick Pettit

Nick Pettit

Forum Contest: Progress Bars

60 Answers

John Steer-Fowler

John Steer-Fowler

Adhithya Kumar

Adhithya Kumar

Nick Pettit

Nick Pettit

Sam May

Sam May

Oron Ben Zvi

Oron Ben Zvi

neilh

neilh

Diego Lucero

Diego Lucero

Sam May

Sam May

Diego Lucero

Diego Lucero

Sam May

Sam May

Diego Lucero

Diego Lucero

Sam May

Sam May

James Ingmire

James Ingmire

Nick Pettit

Nick Pettit

Walter Aucaylle

Walter Aucaylle

Diego Lucero

Diego Lucero

Dave McFarland

Dave McFarland

aviskase

aviskase

James Ingmire

James Ingmire

aviskase

aviskase

James Ingmire

James Ingmire

Martha Garvey

Martha Garvey

Véronique Bellamy

Véronique Bellamy

Nick Pettit

Nick Pettit

codelikejesus

codelikejesus

James Barnett

James Barnett

Trey Weier

Trey Weier

James Ingmire

James Ingmire

Trey Weier

Trey Weier

Alan Black

Alan Black

Nick Pettit

Nick Pettit

Trey Weier

Trey Weier

Anthony Lockett

Anthony Lockett

Anthony Lockett

Anthony Lockett

Trey Weier

Trey Weier

Larry Cousino

Larry Cousino

Benjamin Joyce

Benjamin Joyce