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
2 years 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

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:

2 years ago By Aniket Prajapati
HashMaps

Hashing is a technique or process of mapping keys, and values into the hash table by using a hash function. It is done for faster access to elements.

1 year ago By Aniket Prajapati
Real DOM VS Virtual DOM

In this article, we will discuss the differences between the real DOM and the virtual DOM in the context of web development. We'll explore how these concepts impact the performance and efficiency of web applications, and how they contribute to the overall user experience. By the end of this article, you'll have a clear understanding of the distinctions between these two approaches to managing and updating user interfaces on the web.

1 year ago By Mitali Gupta
Searching Algorithm.

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

2 years ago By Aniket Prajapati