Creating A Spinner Using Pure Html And Css

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.

Creating a Spinner Using Pure HTML and CSS

Other Articles