Create a Glowing Loader with CSS and HTML
Tags: css, html, animate, loader
Published: 2021-04-16 20:52:57

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 on [jsfiddle (33 changes)](https://jsfiddle.net/hieunc229/wyk0qg9L/33/).

## 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:

```html
<div class="logo-container">
  <span class="spinner"></span>
  <span class="background"></span>
  <img class="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 children `logo` in the center. Let's use `flex` in this example.

```css
.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.

![](https://wilson.inverr.com/media/glowing-spinner-1.png)


Before going into the button background and the spinner. We need to make sure they are overlay layers, by applying absolute positioning as following.

```css
.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

```css
/* 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;
}
```

It'll look like this now:

![](https://wilson.inverr.com/media/glowing-spinner-2.png)

---

### 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:

```css
.logo {
  z-index: 2;
}
```
---

### 4. Glowing spinner

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

```css
.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;
}
```

Then add the animation keyframes. It's basically a keyframe that rotate the light spinner in a 360 degree circle

```css
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
```

You should see a glowing spinner with your logo inside. Here is our final result.

![](https://wilson.inverr.com/media/glowing-spinner-3.gif)

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](https://jsfiddle.net/m52jdu3e/);

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