Loading Animation: A Stylish Preloader with Keyframes By Kainat Ijaz

Introduction

Loading animations are an essential part of modern web design. They not only provide a visual cue to users that the website is loading, but also add a touch of elegance and professionalism to the overall user experience. In this tutorial, we will learn how to create a stylish preloader using keyframes in CSS.

How to Create Awesome Spinner Preloader By Kainat Ijaz

Step 1: HTML Markup

First, let’s start by creating the HTML markup for our preloader. We will use a simple div element with a class of ‘preloader’.

<div class='preloader'></div>

Step 2: CSS Styling

Next, let’s add some CSS to style our preloader. We will set the width and height to create a square-shaped preloader, and give it a background color to make it visually appealing. We will also center it on the screen using flexbox.

.preloader {
  width: 80px;
  height: 80px;
  background-color: #3498db;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

Step 3: Keyframes Animation

Now comes the fun part – creating the animation using keyframes. Keyframes allow us to define the intermediate steps of an animation. In this case, we will create a simple rotation animation that makes our preloader spin.

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

Step 4: Applying the Animation

Finally, let’s apply the animation to our preloader using the animation property in CSS. We will set the duration, timing function, and iteration count to control how the animation behaves.

.preloader {
  animation: spin 1s linear infinite;
}

Conclusion

And there you have it – a stylish preloader using keyframes in CSS. You can customize the size, color, and animation duration to fit your design needs. Adding a loading animation not only enhances the user experience but also gives your website a professional touch. Happy coding!

<main class="wrapper">
  <section class="loaders"><span class="loader loader-quart"> </span> Loading...</section>
  <section class="loaders loaders-bg-2"><span class="loader loader-double"> </span> Loading...</section>
  <section class="loaders loaders-bg-3"><span class="loader loader-circles"> </span> Loading...</section>
  <section class="loaders loaders-bg-4"><span class="loader loader-bars"><span> </span></span> Loading...</section>
</main>
body {
  font-family: sans-serif;
  font-size: 40px;
  font-size: 2.5rem;
  text-align: center;
  color: #F9E5FF;
  background-color: #222;
}
.wrapper {
 	position: relative;
/* 	display: flex; */
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #222;
  text-align:center
}

.loaders {
  height:150px;
  line-height: 150px;
  background-color: #0066CC;
  width:300px;
  display:inline-block;
  margin:20px auto;
  box-shadow: rgba(0, 0, 0, 0.11) 0px 15px 30px 0px, rgba(0, 0, 0, 0.08) 0px 5px 15px 0px;
  border-radius: 0.5rem;
}

.loaders-bg-2 {
  background-color: #D35400;
}

.loaders-bg-3 {
  background-color: #00D3BE;
}

.loaders-bg-4 {
  background-color: #6E00D3;
}

.loader {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  vertical-align: middle;
}

/*	$Loader Quadrant
	========================================================================== */
.loader-quart {
  border-radius: 50px;
  border: 6px solid rgba(255, 255, 255, 0.4);
}
.loader-quart:after {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-radius: 50px;
  border: 6px solid transparent;
  border-top-color: #F9E5FF;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

/*	$Loader Double circle
	========================================================================== */
.loader-double {
  border-radius: 50px;
  border: 6px solid transparent;
  border-top-color: #F9E5FF;
  border-bottom-color: #F9E5FF;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}
.loader-double:before, .loader-double:after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 50px;
  border: 6px solid transparent;
  border-top-color: #F9E5FF;
  border-bottom-color: #F9E5FF;
  opacity: 0.6;
  filter: alpha(opacity=60);
  -webkit-animation: spinreverse 2s linear infinite;
  animation: spinreverse 2s linear infinite;
}
.loader-double:before {
  top: 13px;
  left: 13px;
  bottom: 13px;
  right: 13px;
  -webkit-animation: spinreverse 3s linear infinite;
  animation: spinreverse 3s linear infinite;
}

/*	$Loader Multiple circle
	========================================================================== */
.loader-circles {
  border-radius: 50px;
  border: 3px solid transparent;
  border-top-color: #fff;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}
.loader-circles:before, .loader-circles:after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 50px;
  border: 3px solid transparent;
  border-top-color: #F9E5FF;
  opacity: 0.8;
  filter: alpha(opacity=80);
  -webkit-animation: spinreverse 5s linear infinite;
  animation: spinreverse 5s linear infinite;
}
.loader-circles:before {
  top: 12px;
  left: 12px;
  bottom: 12px;
  right: 12px;
  -webkit-animation: spinreverse 10s linear infinite;
  animation: spinreverse 10s linear infinite;
}

/*	$Loader Bars
	========================================================================== */
.loader-bars:before,
.loader-bars:after,
.loader-bars span {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 30px;
  background-color: #F9E5FF;
  -webkit-animation: grow 1.5s linear infinite;
  animation: grow 1.5s linear infinite;
}

.loader-bars:after {
  left: 15px;
  -webkit-animation: grow 1.5s linear -0.5s infinite;
  animation: grow 1.5s linear -0.5s infinite;
}

.loader-bars span {
  left: 30px;
  -webkit-animation: grow 1.5s linear -1s infinite;
  animation: grow 1.5s linear -1s infinite;
}

@-webkit-keyframes grow {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
@keyframes grow {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    tranform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    tranform: rotate(360deg);
  }
}
@-webkit-keyframes spinreverse {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    tranform: rotate(-360deg);
  }
}
@keyframes spinreverse {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    tranform: rotate(-360deg);
  }
}

Loading Animation A Stylish Preloader with Keyframe

Related Post

Leave a Reply

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