Creative Loading Effects

Some ideas and inspiration for loading effects on a website.
CreativeLoadingEffects

From our sponsor: Ship fast and never break a thing with Shortcut (formerly Clubhouse.io).

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).

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:

CreativeLoadingEffects01
CreativeLoadingEffects02
CreativeLoadingEffects03
CreativeLoadingEffects04
CreativeLoadingEffects06
CreativeLoadingEffects06

I hope these loading ideas give you some inspiration for your next project!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 59

Comments are closed.
  1. 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

  2. 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!

  3. 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.

  4. 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); } }