Animated CSS Loader Component

Overview

The HTML/CSS Loader Component is an essential element of modern web design and user interface development. It plays a crucial role in enhancing the user experience by providing visual feedback during content loading or when executing asynchronous actions. This component, crafted with HTML and CSS, offers a sleek and visually appealing loading animation that can be seamlessly integrated into web applications and websites.

preview

JSX

index.jsx

export const Loader = () => <span className="loader"></span>;

HTML

index.html

<span class="loader"></span>

css

styles.css

:root {
  --primary-color: #ae47fe;
}

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #64748b;
  border-bottom-color: var(--primary-color);
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}