Skip to content
Related Articles

Related Articles

How to create wave ball effect using CSS?
  • Last Updated : 11 Sep, 2020

Wave ball effect is a new entry in the world of animation effects that are used in the designing of modern web apps. In this effect, we have some balls which are animated like a wave. Now you can add different elements to it make it unique like a different color for balls and animation-delay or by changing the axis of animation.

Approach: The approach is to first create some small size balls and then use keyframes to animate them and also change the color of the balls on each frame division. Then we will be adding some animation-delay to each of the balls. Although, the animation delay part is optional.

HTML Code: In this section, we have created a number of span tags that will be used to make the balls. All of them are wrapped inside a div tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
<title>Wave Ball Effect</title>
</head>
<body>
     <div class="loader">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
</body>
</html>

chevron_right


CSS Code: For CSS, follow the below given steps.

  • Step 1: First, apply a dark background to the body tag.
  • Step 2: Now align all the span tag to center of the page.
  • Step 3: Now use animation property with identifier name animate.
  • Step 4: Now use keyframes to to apply border and color for each frame division. Use transform on Y-axis.
  • Step 5: Now use n-th child property to give some animation delay to each span tag.
filter_none

edit
close

play_arrow

link
brightness_4
code

body {
        background: rgb(65, 63, 63);
      }
  
      .loader {
        height: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
      }
      .loader span {
        height: 15px;
        width: 15px;
        display: inline-block;
        border-radius: 50%;
        transition: all 0.5s;
        animation: animate 2s infinite;
      }
      @keyframes animate {
        0% {
          border: 1px solid #fff;
          background: transparent;
  
          transform: translateY(0);
        }
        50% {
          border: 1px solid #fff;
          background: green;
  
          transform: translateY(-25px);
        }
        100% {
          border: 1px solid #fff;
          background: yellow;
  
          transform: translateY(0);
        }
      }
      .loader span:nth-child(1) {
        animation-delay: 0;
      }
  
      .loader span:nth-child(2) {
        animation-delay: 0.1s;
      }
  
      .loader span:nth-child(3) {
        animation-delay: 0.2s;
      }
  
      .loader span:nth-child(4) {
        animation-delay: 0.3s;
      }
  
      .loader span:nth-child(5) {
        animation-delay: 0.4s;
      }
  
      .loader span:nth-child(6) {
        animation-delay: 0.5s;
      }

chevron_right


Tip: Make sure the to keep the size of balls small and you can change the axis of animation to X-axis for a different effect.



Complete Code: It is the combination of the above two sections of code.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
<title>Wave Ball Effect</title>
  <style>
        body {
        background: rgb(65, 63, 63);
      }
  
      .loader {
        height: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
      }
      .loader span {
        height: 15px;
        width: 15px;
        display: inline-block;
        border-radius: 50%;
        transition: all 0.5s;
        animation: animate 2s infinite;
      }
      @keyframes animate {
        0% {
          border: 1px solid #fff;
          background: transparent;
  
          transform: translateY(0);
        }
        50% {
          border: 1px solid #fff;
          background: green;
  
          transform: translateY(-25px);
        }
        100% {
          border: 1px solid #fff;
          background: yellow;
  
          transform: translateY(0);
        }
      }
      .loader span:nth-child(1) {
        animation-delay: 0;
      }
  
      .loader span:nth-child(2) {
        animation-delay: 0.1s;
      }
  
      .loader span:nth-child(3) {
        animation-delay: 0.2s;
      }
  
      .loader span:nth-child(4) {
        animation-delay: 0.3s;
      }
  
      .loader span:nth-child(5) {
        animation-delay: 0.4s;
      }
  
      .loader span:nth-child(6) {
        animation-delay: 0.5s;
      }
  </style>
</head>
<body>
  
    <div class="loader">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
</body>
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :