Animated Loading Button

Enhance user interaction on your website with an animated loading button. Learn how to implement a button that provides visual feedback during loading processes.

Preview
Code

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />


<button class="loading">
  <span class="material-symbols-outlined"> refresh </span>
  <p>Reloading</p>
</button>

:root {
  --color-light: #79efff;
  --color-dark: #71e0ef;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: #1c1e1f;
  display: grid;
  place-items: center;
}

button {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 64px;
  padding: 0 38px 0 30px;
  border: 0;
  border-radius: 32px;
  font-size: 18px;
  font-weight: 500;
  background: var(--color-light);
  color: #0e1e25;
}

@keyframes loading {
  0% {
    transform: translateX(25px);
  }
  100% {
    transform: translateX(-30px);
  }
}

@keyframes spin {
  100% {
    rotate: 1turn;
  }
}

button > :is(span, p) {
  position: relative;
  z-index: 3;
}

button::before,
button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.25s;
}

button::before {
  z-index: 1;
  background: var(--color-light)
    repeating-linear-gradient(
      50deg,
      transparent,
      transparent 10px,
      var(--color-dark) 10px,
      var(--color-dark) 20px
    );
}

button::after {
  z-index: 2;
  background: linear-gradient(var(--color-light) 30%, transparent 100%);
}

button::after {
  z-index: 2;
}

button.loading:hover::before,
button.loading:hover span {
  animation-play-state: paused;
}

button.loading::before,
button.loading::after {
  opacity: 1;
}

button.loading::before {
  animation: loading 0.6s infinite linear;
}

button.loading span {
  animation: spin 0.6s infinite linear;
}

```
No need of JavaScript
```

Enhance your website's user experience with an animated loading button using HTML and CSS. This guide will walk you through the process of integrating and customizing a loading button, ensuring it fits seamlessly into your website's design and functionality.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippet for the animated loading button. This snippet includes the structure and styles needed to create an interactive and visually appealing loading button.

Step 2: Link the CSS and Material Symbols File

Ensure the CSS file (styles.css) and Material Symbols are correctly linked in your HTML document. Add the following <link> tags within the <head> section to import the necessary styles:
```
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
```

Step 3: Customize and Make it Yours

Personalize the animated loading button to match your website's aesthetics. Adjust the CSS styles (styles.css) to change the button's color, size, font, or loading icon styles. Experiment with different animations and button styles to create a unique and engaging loading button for your users.

By following these steps, you can implement and customize an animated loading button using HTML and CSS, enhancing user interaction and visual appeal on your website.

Code Explanation

HTML Code

`<button class="loading">`:

This is a button element with a class of loading. The class can be used to apply specific styles to this button through CSS.

`<span class="material-symbols-outlined">` refresh `</span>`:

This span element contains an icon. The material-symbols-outlined class suggests that this icon is from the Material Icons set, specifically using the outlined style.
The text refresh within the span is the name of the icon to be displayed, which in this case would be a refresh or reload symbol.

`<p>`Reloading`</p>`:

This p element contains the text "Reloading", which indicates the button's function or status.

CSS Code

{ ... }:

Defines CSS custom properties (--color-light and --color-dark) to store colors for use throughout the stylesheet.

html, body { ... }:

Ensures the html and body elements take up the full viewport height (100%) and removes default margins.

body { ... }:

Centers the content both horizontally and vertically using CSS grid (display: grid; place-items: center;).
Sets a dark background color (#1c1e1f) for the body.

button { ... }:

Styles all <button> elements.
Makes the button a flex container (display: flex;), aligns items and justifies content to the center (align-items: center; justify-content: center;).
Adds space between child elements (gap: 12px;).
Sets specific dimensions (height: 64px; padding: 0 38px 0 30px;) and styling (no border, rounded corners with border-radius: 32px;).
Applies a background color using a CSS custom property (var(--color-light)).
Sets text color to a dark shade (color: #0e1e25;).

@keyframes loading { ... }:

Defines a keyframe animation (loading) that moves the button content horizontally.
Starts with a translateX transformation to the right (transform: translateX(25px);) and ends with a translateX transformation to the left (transform: translateX(-30px);).

@keyframes spin { ... }:

Defines a keyframe animation (spin) that rotates the button content.
Rotates the content 360 degrees (rotate: 1turn;) for a complete spin.

button > :is(span, p) { ... }:

Applies specific styles to direct child span and p elements within the button.
Ensures they have a higher stacking order (z-index: 3;) to appear above other pseudo-elements.

button::before, button::after { ... }:

Styles pseudo-elements (::before and ::after) of the button.
Positions them absolutely (position: absolute; top: 0; left: -100%;) to the left of the button.
Sets their width to three times the button width (width: 300%;).
Starts with zero opacity (opacity: 0;) and transitions opacity (transition: opacity 0.25s;).

button::before { ... }:

Styles the ::before pseudo-element with a repeating linear gradient.
Creates a striped background using the defined custom colors (--color-light and --color-dark).

button::after { ... }:

Styles the ::after pseudo-element with a linear gradient background.
Provides a gradient effect to complement the loading animation.

button.loading:hover::before, button.loading:hover span { ... }:

Pauses the animation (animation-play-state: paused;) on hover for both the ::before pseudo-element and child span elements within the button when it is in the loading state.

button.loading::before, button.loading::after { ... }:

Ensures that the ::before and ::after pseudo-elements are visible (opacity: 1;) when the button is in the loading state.

button.loading::before { ... }:

Applies the loading animation defined earlier to the ::before pseudo-element, creating a moving stripe effect.

button.loading span { ... }:

Applies the spin animation defined earlier to the child span elements within the button, causing them to rotate.