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

Arrays Introduction

An array is a continuous block of memory location which can store data of same datatype.

2 years ago By Aniket Prajapati
Livewire contenteditable to variable using entagle

using livewire apline js to update variable in livewire component

1 year ago By Santosh Kshirsagar
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
Best Websites for Building Resumes

In this article, we will explore five top websites that can assist you in crafting a compelling resume to increase your chances of getting shortlisted by companies.

2 years ago By Mitali Gupta