Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Create a Glowing Loader with CSS and HTML
Hieu Nguyen
Hieu Nguyen

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>
Enter fullscreen modeExit fullscreen mode

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%;}
Enter fullscreen modeExit fullscreen mode

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%;}
Enter fullscreen modeExit fullscreen mode

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;}
Enter fullscreen modeExit fullscreen mode

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;}
Enter fullscreen modeExit fullscreen mode

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;}
Enter fullscreen modeExit fullscreen mode

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);}}
Enter fullscreen modeExit fullscreen mode

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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
amaggi profile image
Agustin Maggi
Developer • DevOps enthusiast • self-proclaimed designer
  • Location
    Argentina
  • Work
    Senior Software Engineer
  • Joined

Super cool effect!

CollapseExpand
 
hieussr profile image
Hieu Nguyen
A (few) coffee a day keeps the bugs away. Building Nocode Appstore @ rebit.co
  • Work
    Founder at Rebit
  • Joined

Thanks Agustin!

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

A (few) coffee a day keeps the bugs away. Building Nocode Appstore @ rebit.co
  • Work
    Founder at Rebit
  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp