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
@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