How to Create Fantastic Spinner By Kainat Ijaz

How to Create Fantastic Spinner By Kainat Ijaz. Spinners are a great way to add interactivity and visual appeal to your website. They are commonly used to indicate that the website is loading or processing data. In this tutorial, we will learn how to create an awesome spinner using HTML and CSS.

HTML Markup

To get started, let’s create the HTML markup for our spinner. We will use a <div> element to represent the spinner and add some CSS to style it.

<div class="spinner"></div>

CSS Styling

Now, let’s add some CSS to style our spinner. Here’s an example of how the CSS code should look like:

.spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #ccc;
  border-top-color: #888;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Explanation

Let’s break down the CSS code:

  • width: 40px; and height: 40px; set the dimensions of the spinner.
  • border-radius: 50%; creates a circular shape for the spinner.
  • border: 4px solid #ccc; and border-top-color: #888; define the border properties of the spinner.
  • animation: spin 1s infinite linear; applies the spin animation to the spinner. The animation lasts for 1 second, repeats infinitely, and follows a linear timing function.
  • @keyframes spin defines the keyframes for the spin animation. We start from 0 degrees rotation and end at 360 degrees rotation.

Usage

Now that we have created our spinner, let’s see how we can use it in our website. Simply add the following HTML code wherever you want the spinner to appear:

<div class="spinner"></div>

Feel free to customize the CSS properties to match your website’s design. You can change the size, colors, and animation duration to suit your needs.

Conclusion

In this tutorial, we have learned how to create an awesome spinner using HTML and CSS. Spinners are a useful tool for indicating loading or processing states in your website. With a few lines of code, you can add interactivity and visual appeal to your web pages. Make sure to experiment with different CSS properties and animations to create unique spinners for your projects.

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

Watch Our More Videos On YouTube

<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="main">
<div class="spin1">
<div class="spin2">
<div class="spin3">
<div class="spin4">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.main{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;

	}
	.spin4{
		height: 50px;
		width: 50px;
		border-bottom: 5px solid yellow;
		border-radius: 100%;
		animation: spin4 3s infinite linear;
	}
	.spin3{
	padding: 2px;;
		border-right: 5px solid rgb(2, 2, 2);
		border-radius: 100%;
		animation: spin3 3s infinite linear;
	}
	.spin2{
		padding: 2px;;
		border-top: 5px solid red;
		border-radius: 100%;
		animation: spin2 3s infinite linear;
	}
	.spin1{
		padding: 2px;;
		border-left: 5px solid blue;
		border-radius: 100%;
		animation: spin1 3s infinite linear;
	}
@keyframes spin1 {
	0%{
		transform:rotate(0deg)
	}
	100%{
		transform:rotate(360deg)
	}
}
@keyframes spin2 {
	0%{
		transform:rotate(360deg)
	}
	100%{
		transform:rotate(-360deg)
	}
}
@keyframes spin3 {
	0%{
		transform:rotate(-360deg)
	}
	100%{
		transform:rotate(360deg)
	}
}
@keyframes spin4 {
	0%{
		transform:rotate(360deg)
	}
	100%{
		transform:rotate(-360deg)
	}
}

Leave a Reply

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