How to Create Awesome Spinner Preloader By Kainat Ijaz

Introduction

How to Create Awesome Spinner Preloader By Kainat Ijaz. Spinners are a popular UI component used to indicate that a process is ongoing or loading. They are commonly seen in web applications, especially when waiting for data to be fetched or processed. In this tutorial, we will learn how to create a spinner using HTML and CSS.

Step 1: HTML Markup

To begin, let’s start by creating the HTML structure for our spinner. We will use a <div> element with a class of ‘spinner’.

<div class='spinner'></div>

Step 2: CSS Styling

Next, we’ll add the CSS styles to create the spinning effect. We can achieve this using CSS animations. Let’s define the keyframes for our spinner animation.

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Now, let’s apply the animation to our spinner element.

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

Step 3: Adding the Spinner to Your Website

Now that we have created the spinner, let’s add it to your website. Simply copy the HTML markup and CSS styles to your project. You can place the spinner wherever you want on your page by including the <div class='spinner'></div> element in the desired location.

Customizing the Spinner

You can customize the spinner by modifying the CSS styles. For example, you can change the size of the spinner by adjusting the width and height properties. You can also change the colors of the spinner by modifying the border and border-top properties.

Conclusion

In this tutorial, we have learned how to create a spinner using HTML and CSS. Spinners are a great way to enhance the user experience by indicating ongoing processes or loading states. You can further customize the spinner to match your website’s design. Now, go ahead and add spinners to your projects!

Related:https://cssanimation.shop/awesome-buttons-hover-glowing-effects-using-only-html-css-informativeworld713/

Watch Our More Videos On YouTube

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<div class="main">
<div class="spin">
<div class="spins">
</div>
</div>
</div>
</body>
</html> 
.main{
display: flex;
justify-content: center;
align-items: center;
height: 100vh
}
.spin{
padding: 2px;
border-top: 5px solid green;
border-right: 5px solid black;
border-bottom: 5px solid red;
border-left: 5px solid blue;
border-radius: 100%;
animation: spin 1s infinite linear;
}
.spins{
height: 50px;
width: 50px;
border-top: 5px solid green;
border-right: 5px solid black;
border-bottom: 5px solid red;
border-left: 5px solid blue;
border-radius: 100%;
animation: spins 1s infinite linear;
}
@keyframes spin{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes spins{
0%{
transform: rotate(360deg);
}
100%{
transform: rotate(-360deg);
}
}
2 thoughts on “How to Create Awesome Spinner Preloader By Kainat Ijaz”

Leave a Reply

Your email address will not be published. Required fields are marked *