Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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

Tks Mike!

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

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

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