Sometimes you need to lock up a part of your website or application. Now there are 2 options, have a simple login form and call it a day or go all in with a fancy login screen with gooey loader. And today I have the latter for you, for free!

Animations and transitions

I love animation on the web. Sometimes I like them over the top just to add an extra wow factor. But most of the times animations just get in the way. There are use cases however where an animation could be beneficial. A login screen, for example, could benefit from animations. It can make your application feel more responsive. If the user has something to look at while in the background the login screen has submitted the data to the server. The user has not noticed any extra delays as the screen was just transitioning.

See the Pen Gooey loader with log in screen by Skippy (@Skippy) on CodePen.0

In the example there are several animations, this freebie is here to inspire you and maybe for you to use in your application. When the user has filled in the form, and clicked on the login button. The first animation will fire. The user is now done with the form , the animation will slide it out of view and fade it out. If the user has somehow done something wrong. You could animate the form back up and display an error.
Let’s say in our theoretical example the application has to download the profile, or tweak some settings or something. It has to do stuff in the background that can take up some time. To make this less obvious that is needs to do a lot, we can animate the window first before we show a loader. This way we can minimize the time needed for the actual loader.

All loading times in my example are arbitrary, as it is a fake login window. No back-end has been implemented.

Sliding and gooey loader animation

Gooey loader

The gooey loader uses a special effect that is called a “Gooey effect”. Chris Coyier from Css-Tricks has written a nice article about this. Go check it out.

What it essentially does, is blurring an object so much that the object gets all spread out. Like this in the example below.

See the Pen MpwWya by Skippy (@Skippy) on CodePen.dark

 

If you place more circles next to each other, the blurring will start to overlap. If you add contrast to this, the shapes will blend together in a sort of slimy state.

See the Pen gmpOwQ by Skippy (@Skippy) on CodePen.dark

 

While this effect looks cool enough on its own, you can animate the circles to have a really cool effect.

Gooey effect for a gooey loader in action

Image taken from https://css-tricks.com/shape-blobbing-css/

This works with more than just circles as you can see in the loader, there is an subtle effect to the corners of the parts that are clipping. It looks like an elastic square with a circle bouncing inside trying to break outside of it. Here is a standalone version of the gooey loader.

See the Pen bqdGMb by Skippy (@Skippy) on CodePen.dark

 

Gradients are cool again

Horizontal Gradient from pink red to orange yellow

As you might have noticed browsing around on the web, gradients are cool again. Probably sparked by Apple’s design choices and the Duo tone images trend that Spotify started might have helped making a comeback. I hope we don’t go overboard again with them like the web used to use it last time it was “hip”.

Don't do this

Remember us? We were everywhere!

Meaningful animations

I’ve spoken about the animation in an earlier chapter but I wanted to point out that animations used in a meaningful way can help the user navigate your application. In the example provided you can see that everything comes from 1 element. The element the user was already looking at. It shrinks down and removes the elements not needed anymore. It shows a new line of text based on the new context. You can leave the loading text out if you want, but I liked it. The loader is essentially the users profile pic bouncing around ready to break out. When the application is done loading we transform the same element that was the loader to a circle displaying the logged in users profile pic.

This is more or less based on the philosophy of Google’s Material design. They even take it a step further. It’s a good read if you have some extra time.

How to use this

Just copy and paste it, no I am kidding. Before you can use this you need to integrate this with your existing login form. Every form is different and you need to use Ajax to talk to the backend, otherwise the page will refresh and the animations will not be playing along the proces.

In the code below there are several steps that are triggered by jQuery in the example, but in a real world situation it would be triggered by the callback of the server.

credits to Sergey Kupletsky for creating the Material design icon font.


0 thoughts on “Free fancy login screen with a gooey loader”

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Freebie

Animate page based on the users scroll position

Today I am going to give away a freebie. I am planning on doing this regularly, so if anyone has any suggestions on what they would like to see. Leave a comment if you have Read more...

Codepen

3D Product Display with a hover effect

It has been a long time since I last posted. But that doesn’t mean I haven’t created stuff in the mean time. For this post I have a 3D Product Display system. A simple menu Read more...