Beating Heart (pure CSS based) Loader


By squashlabs, Last Updated: January 26, 2020

Beating Heart (pure CSS based) Loader

The code below generates a beating heart that can be used as a CSS loader, use it in web pages and web apps.

A beating heart (pure CSS) loader. Click To Tweet


CSS Code

Preview and Download it here.

@keyframes beating {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }

.loader {
    position: relative;
    width: 100px;
    height: 90px;
    display: inline-block;
    animation: beating 1s infinite;

.loader::after {
    content: "";
    position: absolute;
    top: 50px;
    width: 52px;
    height: 80px;
    border-radius: 50px 50px 0 0;
    background: red;

    left: 50px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;

    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;


More Articles from the CSS and Programming series:

Subscribe to our Newsletter

A curated list of the top stories in programming and DevOps.
Delivered weekly by a seasoned CTO.

We will never spam you. One email per week with latest updates.