Limited Period Offer : 20% Discount on online/offline courses, for more details call/whatsapp

Creating a Spinner Using Pure HTML and CSS

1 min read
1 year ago By Mitali Gupta
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.
Jun 13, 2023 01:00 Back to Articles

Other Articles

Searching Algorithm.

Linear Search Algorithm in the Array traverse through each element in the give array and search the elements.

1 year ago By Aniket Prajapati
The Importance of UX Design in Software Development The Importance of UX Design in Software Development

UX design is vital for user engagement, satisfaction, and the success of software applications in competitive markets.

2 years ago By Mitali Gupta
Top 10 Web Frameworks of 2023 Top 10 Web Frameworks of 2023

As technology evolves and new trends arise, the landscape of web frameworks is continually shifting. This article will present the top 10 web frameworks to consider in 2023.

2 years ago By Mitali Gupta
Binary Tree

Binary Tree is a Non-Linear data structure which has atmost 2 child . A Binary tree is represented by a pointer to the topmost node (commonly known as the “root”) of the tree. If the tree is empty, then the value of the root is NULL. Each node of a Binary Tree contains the following parts:

1 year ago By Aniket Prajapati