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.

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::before,
.loader::after {
    content: "";
    position: absolute;
    top: 50px;
    width: 52px;
    height: 80px;
    border-radius: 50px 50px 0 0;
    background: red;
}

.loader::before{
    left: 50px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.loader::after{
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

Diagram