Spinners are a common UI element used to indicate that a process is ongoing and to provide visual feedback to users. In this article, we will explore how to create a spinner using pure HTML and CSS. By the end, you'll have a stylish spinner that rotates indefinitely, adding a touch of dynamism to your web pages.
**Step 1: HTML Markup** To begin, let's set up the HTML structure for our spinner. Place the following code within the body of your HTML file:
<div class="outer">
<div></div>
</div>
Step 2: Styling the Spinner Next, we'll style the spinner using CSS. Add the following code within the tags of your HTML file or in a separate CSS file linked to your HTML file:
.outer {
width: 64px;
height: 64px;
border: 8px solid;
border-color: #3d5af1 transparent #3d5af1 transparent;
border-radius: 50%;
animation: spin 1.2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- Define the "outer" class with a 64px*64px container.
- Set the border-radius property to 50% for creating a perfect circle.
- Use the animation property to apply the "spin" animation, rotating the spinner 360 degrees over 1.2 seconds.
- The linear timing function ensures a constant speed throughout the animation.
- Inside the @keyframes rule, define the "spin" animation with 0% and 100% keyframes representing the starting and ending points of a full 360-degree rotation.
