A preloader (also known as the loader) is an animation indicating the progress of a page-load in the background. Preloaders convince users that the website is running on loading the page. This can help enhance user experience and reduce the overall bounce rate.
Today in this blog, I'll share you an Animated Heart Shape Preloader. This loader rotates 720deg infinitely. While this loader is active you can see there are two shapes of the loader, one shape is a round shape and another one is a heart shape. This loader changes or animates a round shape to heart shape smoothly while it's rotating.
If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Heart Shape Preloader or Loader).
Video Tutorial of Heart Shape Preloader or Loader
If you're a beginner and you have some knowledge of HTML & CSS then you can also create this type loader or loading animation. You can use this preloader on your websites and projects easily. This loader helps your visitors and viewers entertained while the rest of the page’s content is still loading.
Heart Shape Loader Animation [Source Codes]
As always, before sharing the codes of this program (Heart Shape Preloader). Let's a few talk about the main tags and codes of this program. In the HTML File, first I created a <div> with the class name "container" and placed all other tags inside it. Then I created another <div> with the class name "preloader" and placed three <span> tag inside it. At last inside <div class="container"> tag I created a <div> with the class name "shadow".
In the CSS File, first I placed all elements at the center. Then I created three shapes (two shapes are round and one shape is square) and filled with the same color. Using :nth-child() selector I change the position of each shape. At last, using @keyframe property I rotate and change the size of shapes at a certain time.
The @keyframes CSS property at-rule controls the common steps in a CSS animation series by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the common steps of the animation series than transitions.
To create this program (Heart Shape Preloader). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.
HTML FILE:
CSS FILE:
Post a Comment
We welcome relevant and respectful comments. Off-topic or spam comments may be removed.