
Posted on • Originally published atblog.inverr.com
Create a Glowing Loader with CSS and HTML
We want our products to leave a good impression on first-time users. So whenever we build something, we make it possible first, then ask if it can be a little unique. And the glowing loader is one of those attempts.
Here is the original version onjsfiddle (33 changes).
Create your own loader in HTML and CSS
The loader design has a container and 3 elements: the background button, glowing spinner, and the logo. While the button and the spinner are all overlay layers (use absolute positioning).
Let's start with a straigt forward HTML markup as following:
<divclass="logo-container"><spanclass="spinner"></span><spanclass="background"></span><imgclass="logo"src="yourlogo.svg"height="28"/></div>
1. The container
The main point of the container is to groups the elements together, and positioning its childrenlogo
in the center. Let's useflex
in this example.
.logo-container{/* align children in the center */display:flex;align-items:center;justify-content:center;position:relative;/* a circle with 60x60 pixels */width:60px;height:60px;border-radius:50%;}
Now we have a plain logo.
Before going into the button background and the spinner. We need to make sure they are overlay layers, by applying absolute positioning as following.
.background,.spinner{position:absolute;display:inline-block;height:100%;width:100%;}
2. The button background
The button background is a circle, with a matte-ish gradient and shadows. Here's one way to do it
/* The button background layer */.background{border-radius:50%;background-image:linear-gradient(0deg,#0f1013,#252730);box-shadow:04px4px-1pxrgba(0,0,0,0.6),04px6px1pxrgba(0,0,0,0.3),01px2px1pxrgba(0,0,0,0)inset,018px32px-2pxrgba(255,255,255,0.1)inset;}
It'll look like this now:
3. Bring logo to front
In case you can't see your logo, you will need to usez-index
to bring thelogo
on top. Simple as the following CSS:
.logo{z-index:2;}
4. Glowing spinner
Glowing spinner layer use atop-border
attribute, with shadow to add the glowing effect. It can be done as following:
.spinner{border-radius:50%;border-top:2pxsolid#ae34db;/* glowing with shadow (30% of #ae34db) */box-shadow:0-5px5px#ae34db4d;/* add spin animation */animation:spin1slinearinfinite;}
Then add the animation keyframes. It's basically a keyframe that rotate the light spinner in a 360 degree circle
@keyframesspin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
You should see a glowing spinner with your logo inside. Here is our final result.
You can play with thespin
keyframe to change the glowing colors, or spread the shadow more to make it like a siren light.
Now you know how to create a glowing loader. It contains a matte-ish gradient background, with a glowing spinner. You can check out the final resulton jsfiddle;
Let us know what you think and thanks for the support.
Top comments(2)

- LocationArgentina
- WorkSenior Software Engineer
- Joined
Super cool effect!

- WorkFounder at Rebit
- Joined
Thanks Agustin!
For further actions, you may consider blocking this person and/orreporting abuse