Blog / General

M/s VIKASH TECH - Heart Shape Preloader in HTML & CSS

Hello readers, Today in this blog you'll learn how to create a Heart Shape Preloader (Loader) using only HTML & CSS. A preloader (also known as the loader) is an anima

September 19, 2022 · 2 min read

Hello readers, Today in this blog you'll learn how to create a Heart Shape Preloader (Loader) using only HTML & CSS.
A preloader (also known as the loader) is an animation indicating the progress of a page-load in the background. Preloaders convince users that the website is running on loading the page. This can help enhance user experience and reduce the overall bounce rate.
Today in this blog, I'll share you an Animated Heart Shape Preloader. This loader rotates 720deg infinitely. While this loader is active you can see there are two shapes of the loader, one shape is a round shape and another one is a heart shape. This loader changes or animates a round shape to heart shape smoothly while it's rotating.

If you‚Äôre feeling difficulty to understanding what I‚Äôm saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Heart Shape Preloader | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="container">
      <div class="preloader">
        <span></span>
        <span></span>
        <span></span>
      </div>
<div class="shadow">
</div>
</div>
</body>
</html>

CSS

.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container .preloader{
  animation: rotate 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes rotate {
  50%{
    transform: rotate(360deg);
  }
  100%{
    transform: rotate(720deg);
  }
}
.preloader span{
  position: absolute;
  display: block;
  height: 64px;
  width: 64px;
  background: #3fc1f2;
  border: 1px solid #3fc1f2;
  border-radius: 100%;
}
.preloader span:nth-child(1){
  transform: translate(-28px, -28px);
  animation: shape_1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes shape_1 {
  60%{
    transform: scale(0.4);
  }
}
.preloader span:nth-child(2){
  transform: translate(28px, -28px);
  animation: shape_2 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes shape_2 {
  40%{
    transform: scale(0.4);
  }
}
.preloader span:nth-child(3){
  position: relative;
  border-radius: 0px;
  transform: scale(0.98) rotate(-45deg);
  animation: shape_3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes shape_3 {
  50%{
    border-radius: 100%;
    transform: scale(0.5) rotate(-45deg);
  }
  100%{
    transform: scale(0.98) rotate(-45deg);
  }
}
.shadow{
  position: relative;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: 16px;
  width: 64px;
  border-radius: 50%;
  background-color: #d9d9d9;
  border: 1px solid #d9d9d9;
  animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes shadow {
  50%{
    transform: translateX(-50%) scale(0.5);
    border-color: #f2f2f2;
  }
}

M/s VIKASH TECH - Heart Shape Preloader in HTML & CSS

Vikash Mishra