From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
Today we’d like to show you some ideas for creative loading effects. Nowadays, many different page loading animations are used in websites; just think of the subtle red loading bar seen on YouTube. When loading something on a page, be it images or the next content, we don’t have to be restricted to a tiny loading indicator but we can get creative and big. So the idea is to indicate that something is happening in a stylish way without creating too much distraction for the user. There might be actions where this might not be adequate, but in some situations it might be quite fitting and amplifying for the overall design.
Please note that the examples only serve as inspiration, they are dummies and not meant for production. You’ll have to use the transitions or animation together with a custom JavaScript solution.
We mostly just use one division and an example for an effect is the following one where we expand a slit to fill all the page from the center:
.la-anim-7 {
position: fixed;
top: 50%;
bottom: 0;
left: 50%;
z-index: -1;
width: 0;
height: 100%;
background: rgba(0,0,0,0.1);
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
}
.la-anim-7.la-animate {
z-index: 100;
width: 100%;
opacity: 0;
transition: width 5s ease-in, opacity 1s 5s;
}
Some browsers don’t support transitions or animations on pseudo-elements, so some of the effects in the demo won’t be animating. The examples also won’t work in browsers that don’t support CSS 3D transforms (e.g. in IE9 and below).
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
The SVG pie timer was made by Anders Grimsrud. The loading circle in the corner indicator example is by Metty.
Snapshots of some of the effects:
I hope these loading ideas give you some inspiration for your next project!
All very nice, but there is one issue:
That top-to bottom effect is very evil.
Because thats the animation which occurs when your mac crashes big time (bluescreen of death equivalent).
You don’t want to see that animation on a mac ever.
Oh, I had no idea 🙂
Mary Lou you rock my world 😉
It is possible to integrate with some of the jquery preloaders ?
Awesome effects just when I needed them the most,
Please add like buttons to show our love to such posts
I think that integrating with http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/, or http://9elements.github.io/loadie.js/ shouldn’t be a problem. Both of those preloaders allow for easy CSS custom animations.
Mary Lou, great as always…:)
Thanks Mirko ! Let me check with that 🙂
Great! thanks.
Superb, as usual! =))
New exercises manipulation and integration perspective
Spendide !
Thanks you mary lou
Great! thanks.
Awesome effects. Thanks
Simply Stunning… Wish you had a share button on the site to share this with my friends.
I like the corner indicator idea, simply amazing.
This is true a inspiration for the project…xixixixi ^_^’
Awesome as always 🙂
really awesome
Superb animations 🙂
Nice Idea
really nice loading’s 🙂
Loved every post of this site. Very engaging and appealing for me
Mary Lou….. nYc ND Thanxxxx… 4 Share
Wow, I like the corner circular indicator loading effect. Thanks for this…
Who can help me, make it onload when the page loads! thanks
Here you go! http://github.hubspot.com/pace/docs/welcome/
The corner indicator is awesome!
Really nice. Thanks so much for this.
I always learn much here.Thanks.
Hum, this is extremely similar to Pace ( http://github.hubspot.com/pace/docs/welcome/ ). Do you work on their team?
Hi Nicolas, no, but like it’s mentioned in the credits of the documentation, their theme is inspired by our effects 😉
HEY!
When the heck is tympanus.net gonna be up and running?!?! I’ve been waiting like 6 months to see the new design!
Hurry up already!
-Timmy
Very inspiring collection. Thanks for providing such a nice stuff..
It’s very amazing & creative … Thanks.
Hey Mary, I like this color theme. Awesome and attractive for technology person. 🙂
Hi Mary Lou,
your effect are awesome! The only thing is that they are working only on modern browsers and unfortunately there are still many users on older
version. It would be great if you could make the same effects through javascript. Anyway, lots of inspiring work. Thank you!
Is my first website, that i make. Who can help me, make it onload when the page loads! thanks
Nice one!
It misses a key point about a loading icon though. The loading time is never fixed and will vary by device, load on server etc. A standard loading icon works because it can be hidden as soon as the load is complete.
awesome trick
nice
This is Impressive. Really creative. Great work!
Please help me.
How i make it onload when the page loads?
Thank you!
This is quite awesome! Thanks! 🙂
Awesome work once again Mary Lou. I am not certain but i did notice that you changed the corner indicator (animation 10) to a shorter version of Metty’s (http://codepen.io/Metty/pen/lgJck) but doesn’t that break in safari? At least for me it does and i’m on Safari 6.0.5. Does anyone else have the same problem?
I think the problem is the combination of :after/:before with webkit-animation. So i quickly rewrote it for those that have this problem.
html:
<div class="la-anim-10"> <div class="la-circle-01"></div> <div class="la-circle-02"></div> </div>css:
.la-anim-10 { position: fixed; top: 0; right: 0; width: 300px; height: 300px; background: #bc3159; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); transform: translateX(100%) translateY(-100%) rotate(45deg); pointer-events: none; z-index:7; } .la-anim-10.la-animate { -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); transform: translateX(50%) translateY(-50%) rotate(45deg); } /* Loading circle idea from http://codepen.io/Metty/details/lgJck */ .la-anim-10 div { position: absolute; bottom: 30px; left: 48%; display: block; border: 5px solid #fff; border-radius: 50%; content: ''; } .la-anim-10 .la-circle-01{ margin-left: -40px; width: 80px; height: 80px; border-right-color: rgba(255,255,255,0.2); border-left-color: rgba(255,255,255,0.2); -webkit-animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; animation: rotation 3s linear infinite; } .la-anim-10 .la-circle-02 { bottom: 50px; margin-left: -20px; width: 40px; height: 40px; border-top-color: rgba(255,255,255,0.2); border-bottom-color: rgba(255,255,255,0.2); -webkit-animation: rotation 1s linear infinite; -moz-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } @-moz-keyframes rotation { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotation { 0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }It’s really fantastic, every effect in here is just great. Mary, I would love to learn more from you.
hey! i am using the corner indicator on this site: http://showmaniac.org
but i don’t know why it flashes when i’m opening the site (and everytime on reload) you can see it for a short time than it disappears.. I have no clue what’s the problem, i’ve only change the code a little bit.
awesome work btw!!
Big Thanks ………..
You are awesome MARY LOU
great job
Great Work. But How to use page loading.
You re simply awesome… Thanks a lot………..
Hi Mary Lou,
These loading effects are really awesome, i’m very enjoy the ‘3D Bar Bottom’ effect, but how to make it onload as page loading?
Thank you very very much and please answer my question.
Awesome. I always like your work. love it
Excellent work. My new design already uses the corner indicator for AJAX queries.
x-llent.
Awesome Demo, thanks…