How to Implement a Beating Heart Loader in Pure CSS

Avatar

By squashlabs, Last Updated: January 26, 2020

How to Implement a Beating Heart Loader in Pure CSS

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

[bctt tweet=”A beating heart (pure CSS) loader.” username=”LabsSquash”]

 

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%;
}

Related Article: How to Hide Scroll Bar in CSS While Maintaining Scroll Functionality

Diagram

Related Article: How to Fix CSS Text Overflow Ellipsis Issue

More Articles from the Cascading Style Sheets (CSS) Guide series:

How to Disable Scrolling On Body Using CSS

Disabling scrolling on the body of a webpage can be achieved using CSS. This article provides two methods for accomplishing this: using the overflow:hidden property and... read more

How to Implement an Onclick Effect in CSS

Adding an onclick effect in CSS is a simple process that can enhance the interactivity of your web pages. This article provides a guide on how to implement this effect... read more

How to Style a Disabled Button with CSS

Styling disabled buttons using CSS can greatly enhance the user interface of your web application. This article provides a step-by-step guide on two different methods to... read more

How to Set the Transparent CSS Background Color

Setting a transparent background color in CSS is a simple process that can enhance the visual appeal of your website. This article provides a guide on how to achieve... read more

How to Change HTML Input’s Placeholder Color with CSS

Learn how to change the color of an HTML input's placeholder text using CSS. Discover two methods: using the color property and using the ::placeholder selector with a... read more

How to Set Distance Between Flexbox Items in CSS

Setting the distance between Flexbox items in CSS is made easy with two methods: using the gap property or using margin or padding. This article provides a step-by-step... read more