Heartbeat loader

heartbeat-loader.markdown

Heartbeat loader

A Pen by victordg on CodePen.

License.

index.html

<svg id="heart" width="72" height="59" viewBox="0 0 72 59" xmlns="http://www.w3.org/2000/svg">
  <title>heart</title>
  <g fill="none" fill-rule="evenodd">
    <path d="M36.86 8.665l3.172-3.172c7.146-7.146 18.733-7.146 25.88 0 7.146 7.147 7.146 18.733 0 25.88L54.037 43.246c2.973-7.252 1.54-15.863-4.314-21.718L36.86 8.665z" fill="#6078EA"/>
    <path d="M47.164 24.294L28.922 6.052C22.39-.48 11.8-.48 5.268 6.052s-6.532 17.122 0 23.654l27.7 27.7c1.308 1.31 3.43 1.31 4.738 0l9.458-9.458c6.532-6.532 6.532-17.122 0-23.654z" fill="#74BFFF"/>
  </g>
</svg>  

style.scss

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#heart {
  animation-name: heartbeat;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes heartbeat {
  0%   { transform: scale(1);    }
  30%  { transform: scale(1);    }
  40%  { transform: scale(1.12); }
  50%  { transform: scale(1);    }
  60%  { transform: scale(1);    }
  70%  { transform: scale(1.08); }
  80%  { transform: scale(1);    }
  100% { transform: scale(1);    }
}