6

Create a Glowing Loader in CSS and HTML

 2 years ago
source link: https://dev.to/hieussr/create-a-glowing-loader-in-css-and-html-3omd
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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 Hieu's original version on jsfiddle (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:

<div class="logo-container">
  <span class="spinner"></span>
  <span class="background"></span>
  <img class="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 children logo in the center. Let's use flex 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: 0 4px 4px -1px rgba(0, 0, 0, 0.6),
    0 4px 6px 1px rgba(0, 0, 0, 0.3),
    0 1px 2px 1px rgba(0, 0, 0, 0) inset,
    0 18px 32px -2px rgba(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 use z-index to bring the logo on top. Simple as the following CSS:

.logo {
  z-index: 2;
}
Enter fullscreen modeExit fullscreen mode

4. Glowing spinner

Glowing spinner layer use a top-border attribute, with shadow to add the glowing effect. It can be done as following:

.spinner {
  border-radius: 50%;
  border-top: 2px solid #ae34db;

  /* glowing with shadow (30% of #ae34db) */
  box-shadow: 0 -5px 5px #ae34db4d;

  /* add spin animation */
  animation: spin 1s linear infinite;
}
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

@keyframes spin {
  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 the spin 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 result on jsfiddle;

Let us know what you think and thanks for the support.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK