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

JavaScript

Leslie Hui
Leslie Hui
3,330 Points
Posted by Leslie Hui
Leslie Hui
3,330 Points

How to load page like this?

Hi, i was looking at his website (http://www.barrelny.com/) when the loading of this page caught my attention. When i was changing between pages within the site, it will a loading bar to show that it's loading and contents will load in smoothly, and the URL will be updated too.

Can anyone advise how do i go about doing this or point me in a direction.

Thanks in advance!!!

2 Answers

Mike Bronner
Mike Bronner
16,395 Points
Mike Bronner
Mike Bronner
16,395 Points

I believe this is more of an illusion, than an actual progress indicator. Basically its a derivation of the "spinning gear" indicator, and it will keep spinning until the page is done loading. Without looking closely at the code, it would appear that they load the next page using AJAX, and are thus able to keep the indicator spinning while the page loads. Or they could be using CSS3 transitions (i.e. http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/), perhaps in combination with jQuery.

http://wordpress.org/plugins/css3-transitions/ is a plugin for wordpress that will let you add transitions between pages. My guess this is something similar.

Leslie Hui
Leslie Hui
3,330 Points
Leslie Hui
Leslie Hui
3,330 Points

Tks Mike!

Yes, i know it's not a actual progress indicator.

Diego Chavez
Diego Chavez
4,289 Points
Diego Chavez
Diego Chavez
4,289 Points

Hi Leslie I think that page functionality could be done using the PushState and Ajax calls so here's some resources. Take a look at this project is related to the loading animation http://github.hubspot.com/pace/docs/welcome/ and here's an article related to history API pushState and ajax call to load the content http://net.tutsplus.com/tutorials/html-css-techniques/a-first-look-at-the-history-api/

Leslie Hui
Leslie Hui
3,330 Points
Leslie Hui
Leslie Hui
3,330 Points

Wow, thanks a lot for the introduction of pace.js!