HTML-CSS: Pulse loader

Last update on March 07 2024 13:21:44 (UTC/GMT +8 hours)

HTML-CSS : Exercise-12 with Solution

Using HTML, CSS create a pulse effect loader animation using the animation-delay property.

Use @keyframes to define an animation at two points in the cycle. At the start (0%), the two <div> elements have no width or height and are positioned at the center. At the end (100%), both <div> elements have increased width and height, but their position is reset to 0.
Use opacity to transition from 1 to 0 when animating to give the <div> elements a disappearing effect as they expand.
Set a predefined width and height for the parent container, .ripple-loader and use position: relative to position its children.
Use animation-delay on the second <div> element, so that each element starts its animation at a different time.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- License information -->
<!DOCTYPE html><!-- Document type declaration -->
<html><!-- Opening html tag -->
<head><!-- Opening head tag -->
<meta charset="utf-8"><!-- Character encoding -->
<meta name="viewport" content="width=device-width"><!-- Viewport meta tag -->
<title>Using HTML, CSS create a pulse effect loader animation using the animation-delay property</title><!-- Title of the webpage -->
</head><!-- Closing head tag -->
<body><!-- Opening body tag -->
<strong>Preview:</strong><br><!-- Preview heading -->
<div class="ripple-loader"><!-- Container for the loader animation -->
<div>w3r</div><!-- Loader element -->
<div>w3r</div><!-- Loader element -->
</div><!-- Closing ripple-loader div -->
</body><!-- Closing body tag -->
</html><!-- Closing html tag -->

Explanation:

: License information comment.
<!DOCTYPE html>: Declares the document type as HTML5.
<html>: Opening HTML tag.
<head>: Opening head tag.
<meta charset="utf-8">: Specifies the character encoding of the document.
<meta name="viewport" content="width=device-width">: Sets the viewport width to the device width.
<title>Using HTML, CSS create a pulse effect loader animation using the animation-delay property</title>: Sets the title of the webpage.
</head>: Closing head tag.
<body>: Opening body tag.
<strong>Preview:</strong><br>: Heading for the preview.
<div class="ripple-loader">: Container for the loader animation.
<div>w3r</div>: Loader element.
</div>: Closing ripple-loader div.
</body>: Closing body tag.
</html>: Closing HTML tag.

CSS Code:

<style>
/* Opening style tag for CSS */

.ripple-loader {
  position: relative; /* Set the position to relative */
  width: 64px; /* Set the width of the loader */
  height: 64px; /* Set the height of the loader */
}

.ripple-loader div {
  position: absolute; /* Set the position to absolute */
  border: 4px solid #AA4A44; /* Set the border properties */
  border-radius: 50%; /* Set border radius to create a circle */
  animation: ripple-loader 1s ease-out infinite; /* Apply animation to create the ripple effect */
}

.ripple-loader div:nth-child(2) {
  animation-delay: -0.5s; /* Apply animation delay to create staggered animation */
}

@keyframes ripple-loader {
  0% {
    top: 32px; /* Set initial position from top */
    left: 32px; /* Set initial position from left */
    width: 0; /* Set initial width */
    height: 0; /* Set initial height */
    opacity: 1; /* Set initial opacity */
  }
  100% {
    top: 0; /* Set final position from top */
    left: 0; /* Set final position from left */
    width: 64px; /* Set final width */
    height: 64px; /* Set final height */
    opacity: 0; /* Set final opacity */
  }
}

</style>/* Closing style tag */

Explanation:

.ripple-loader: Styles for the container of the ripple loader.
position: relative;: Allows absolute positioning of child elements.
width: 64px; height: 64px;: Sets the dimensions of the loader.
.ripple-loader div: Styles for the circular elements inside the loader.
position: absolute;: Positions the elements absolutely within the container.
border: 4px solid #AA4A44;: Sets the border properties of the circular elements.
border-radius: 50%;: Rounds the corners to create a circle.
animation: ripple-loader 1s ease-out infinite;: Applies the ripple effect animation to the circular elements.
.ripple-loader div:nth-child(2): Selects the second circular element.
animation-delay: -0.5s;: Applies a negative delay to create a staggered animation effect.
@keyframes ripple-loader: Defines the keyframes for the ripple loader animation.
0%: Initial state of the animation.
100%: Final state of the animation.
top: 32px; left: 32px;: Sets the initial position of the circular element.
width: 0; height: 0;: Sets the initial dimensions of the circular element.
opacity: 1;: Sets the initial opacity of the circular element.
top: 0; left: 0;: Sets the final position of the circular element.
width: 64px; height: 64px;: Sets the final dimensions of the circular element.
opacity: 0;: Sets the final opacity of the circular element.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.