Introduction
In this tutorial, we will guide you through the process of creating a Material Design-inspired spinner using HTML and CSS. A spinner is a common loading animation that indicates to users that content is being fetched or processed. Material Design spinners feature sleek and dynamic animations that add a touch of modernity to your website.HTML Structure
To begin, let's set up the HTML structure for our Material Design spinner. We will use an SVG element to create the spinner animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Design Spinner</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</body>
</html>
CSS Styling
Now, let's apply the CSS styles to create the Material Design spinner animation. We'll use keyframes and CSS animations to achieve the dynamic loading effect.
/* Center the spinner */
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
/* Spinner animations */
$offset: 187;
$duration: 1.4s;
.spinner {
animation: rotator $duration linear infinite;
}
@keyframes rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
.path {
stroke-dasharray: $offset;
stroke-dashoffset: 0;
transform-origin: center;
animation:
dash $duration ease-in-out infinite,
colors ($duration * 4) ease-in-out infinite;
}
@keyframes colors {
0% { stroke: #4285F4; }
25% { stroke: #DE3E35; }
50% { stroke: #F7C223; }
75% { stroke: #1B9A59; }
100% { stroke: #4285F4; }
}
@keyframes dash {
0% { stroke-dashoffset: $offset; }
50% {
stroke-dashoffset: $offset / 4;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: $offset;
transform: rotate(450deg);
}
}