HTML-CSS: Bouncing loader

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

HTML-CSS : Exercise-13 with Solution

Using HTML, CSS create a bouncing loader animation.

Use @keyframes to define a bouncing animation, using the opacity and transform properties. Use a single axis translation on transform: translate3d() to achieve better animation performance.
Create a parent container, .bouncing-loader, for the bouncing circles. Use display: flex and justify-content: center to position them in the center.
Give the three bouncing circle <div> elements the same width and height and border-radius: 50% to make them circular.
Apply the bouncing-loader animation to each of the three bouncing circles.
Use a different animation-delay for each circle and animation-direction: alternate to create the appropriate effect.

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 bouncing loader animation</title><!-- Title of the webpage -->
</head><!-- Closing head tag -->
<body><!-- Opening body tag -->
<strong>Preview:</strong><br><!-- Preview heading -->
<div class="bouncing-loader"><!-- Container for the bouncing loader animation -->
<div> w</div><!-- Loader element -->
<div> 3</div><!-- Loader element -->
<div> r</div><!-- Loader element -->
<div> e</div><!-- Loader element -->
<div> s</div><!-- Loader element -->
<div> o</div><!-- Loader element -->
<div> u</div><!-- Loader element -->
<div> r</div><!-- Loader element -->
<div> c</div><!-- Loader element -->
<div> e</div><!-- Loader element -->
</div><!-- Closing bouncing-loader div -->
</body><!-- Closing body tag -->
</html><!-- Closing html tag -->

Explanation:

: Specifies the license information.
<!DOCTYPE html>: Declares the document type as HTML5.
<html>: Opening HTML tag.
<head>: Opening head section.
<meta charset="utf-8">: Defines the character encoding of the document.
<meta name="viewport" content="width=device-width">: Sets the viewport width to the device width for responsive design.
<title>Using HTML, CSS create a bouncing loader animation</title>: Sets the title of the webpage.
</head>: Closing head section.
<body>: Opening body section.
<strong>Preview:</strong><br>: Heading for the preview section.
<div class="bouncing-loader">: Container for the bouncing loader animation.
<div> w</div> to <div> e</div>: Individual loader elements, each containing a character.
</div>: Closing div tag for the bouncing-loader container.
</body>: Closing body section.
</html>: Closing HTML tag.

CSS Code:

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

@keyframes bouncing-loader {
  to {
    opacity: 0.1; /* Reduce opacity */
    transform: translate3d(0, -16px, 0); /* Translate vertically */
  }
}

.bouncing-loader {
  display: flex; /* Display flex for centering */
  justify-content: center; /* Align items horizontally at the center */
 }

.bouncing-loader > div {
  width: 16px; /* Set width */
  height: 16px; /* Set height */
  margin: 3rem 0.2rem; /* Set margin */
  background: #8385aa; /* Background color */
  border-radius: 50%; /* Make circular */
  text: center; /* Center text */
  animation: bouncing-loader 0.6s infinite alternate; /* Apply animation */
}

.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s; /* Delay animation */
}

.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s; /* Delay animation */
}
.bouncing-loader > div:nth-child(4) {
  animation-delay: 0.6s; /* Delay animation */
}
.bouncing-loader > div:nth-child(5) {
  animation-delay: 0.8s; /* Delay animation */
}
.bouncing-loader > div:nth-child(6) {
  animation-delay: 0.10s; /* Delay animation */
}
.bouncing-loader > div:nth-child(7) {
  animation-delay: 0.2s; /* Delay animation */
}
.bouncing-loader > div:nth-child(8) {
  animation-delay: 0.4s; /* Delay animation */
}
.bouncing-loader > div:nth-child(9) {
  animation-delay: 0.5s; /* Delay animation */
}

</style>/* Closing style tag */

Explanation:

@keyframes bouncing-loader: Defines the keyframes for the bouncing loader animation.
to: Specifies the final state of the animation.
opacity: 0.1;: Sets the opacity of the loader element.
transform: translate3d(0, -16px, 0);: Translates the loader element vertically.
.bouncing-loader: Selector for the container of the bouncing loader animation.
display: flex;: Sets the display property to flex for centering the loader elements.
justify-content: center;: Aligns the items horizontally at the center.
.bouncing-loader > div: Selects the loader elements within the container.
width: 16px;, height: 16px;: Sets the width and height of the loader elements.
margin: 3rem 0.2rem;: Sets the margin around the loader elements.
background: #8385aa;: Sets the background color of the loader elements.
border-radius: 50%;: Makes the loader elements circular.
animation: bouncing-loader 0.6s infinite alternate;: Applies the bouncing loader animation.
.bouncing-loader > div:nth-child(n): Selects the nth child loader element.
animation-delay: 0.Xs;: Delays the animation of each loader element to create the bouncing effect.

HTML-CSS Editor:

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