Tutorial

How To Create a Bouncing Page Loader with CSS3 Animations

Published on December 12, 2019
    Default avatar

    By Maedah Batool

    How To Create a Bouncing Page Loader with CSS3 Animations

    While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

    Introduction

    In this tutorial, you will create a bouncing page loader using CSS3 animation keyframes. It will show you how to style HTML for a loading page, create animation keyframes, and use animation delay with keyframes.

    Here’s what you’ll be making by the end of this tutorial:

    Static Image of Loading Page

    Or click use the following CodePen link to see a working example:

    https://codepen.io/MaedahBatool/pen/wZxMjZ?editors=1100

    Step 1 — Writing the HTML

    First, let’s write the basic HTML for this project.

    <p>A simple representation of an animated bouncing loader!</p>
    
    <div class="loader">
      <span></span>
      <span></span>
      <span></span>
    </div>
    

    You added a div with the class called loader. This div is responsible for creating all the page loader elements. Inside this div, you added three consecutive span elements each representing a page loader circle.

    Step 2 — Writing CSS Styles

    Let’s next style our basic elements.

    /*_ OPTIONAL: Styles for the demo. *_/
    body {
      background: #2C294F;
      padding: 2rem;
    }
    
    p {
      font: 1rem/1.45 "Operator Mono";
      color: #A599E9;
      text-align: center;
    }
    

    This code block defines the optional CSS styles for the p tag and the body.

    Styling the .loader Class

    Next, style your page loader with the following properties:

    /_ CSS for animated bouncing loader. _/
    .loader {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    

    Here we use the Flexbox, i.e., display: flex; property to place the bouncing page loader in the middle of the page both horizontally and vertically.

    /_ Loader circles _/
    .loader > span {
      background: #FAD000;
      border-radius: 50%;
      margin: 5rem 0.5rem;
      animation: bouncingLoader 0.6s infinite alternate;
    }
    
    .loader > span:nth-child(2) {
      animation-delay: 0.2s;
    }
    
    .loader > span:nth-child(3) {
      animation-delay: 0.4s;
    }
    

    Each loader circle has width: 1rem; and height:1rem; with #FFB651 color. By default, the shape of the page loader is square. To give it a circular shape, you set the border-radius to 50%. The following GIF shows how the loader looks like without the border-radius property. You also added bit of a margin between the circles.

    The following shows what the style would look like without setting border-radius.

    Page Loader with bouncing, square dots

    The most interesting part here is the animation property. We are using an animation keyframe called bouncingLoader that runs once in 0.6s and repeats itself infinitely. Let’s talk more on that and the animation delay properties in a later section.

    Step 3 — Creating Animation Keyframe

    Keyframes are used to define the animation behavior and give us complete control of one cycle of a CSS animation. We define it as a @keyframes at-rule followed by the name of the animation, which is bouncingLoader in this case.

    Inside a @keyframe rule, you use the keywords from and to in order to specify a starting and ending point for your animation. Equivalently, you can also use 0% for from which depicts the starting point and 100% for to depicting the ending point of your animation.

    Moreover, if you want several animation transitions, you can define a range of percentages each containing a list of styling selectors. These percentages can be listed in any order and with any difference between them. A simple representation of these percentages is shown below:

    @keyframes animationNameHere {
      0% { opacity: 1; }
      30% { opacity: 0.75; }
      50% { opacity: 0.5; }
      100% { opacity: 0.25; }
    }
    

    Let’s now write the code for the keyframe to create the bouncing page loader:

    /_ Define the animation called bouncingLoader. _/
    @keyframes bouncingLoader {
      from {
        width: 0.1rem;
        height: 0.1rem;
        opacity: 1;
        transform: translate3d(0);
      }
      to {
        width: 1rem;
        height: 1rem;
        opacity: 0.1;
        transform: translate3d(0, -1rem, 0);
      }
    }
    

    This uses the keywords from and to, which define the basic styling properties of width, height, and opacity of the circles. Other than that, to create the bouncing effect, you used the CSS transform property to change the coordinates of a given element, hence transforming the location of each circle.

    With this transform property, you’ve used the translate3D() function which takes three inputs explaining the change in (x, y, z) coordinates. Since we wanted our loader to run in a wave motion, we need to translate primarily along the y-axis keeping the x and z-axis constant. Thus, the ending point value is (0, -1rem, 0).

    Let’s show a demo of how to play with this property. If you set your ending point value as transform: translate3d(1rem, 0rem, 1rem);, it’ll mean that you are transforming it along the x and z-axis while keeping your y-axis constant. Now your animation will look something like this:

    Before/after image GIF of the page loader, animating along the x and y axis.

    Using Animation Delay with Keyframe

    Now begins the final part. Since you have written the code for your @keyframe, it’s time to set it up and running. The kind of animation that you are viewing in the previous GIFs was made possible with the following few lines of code:

    /_ Loader circles _/
    .loader > span {
      background: #FAD000;
      border-radius: 50%;
      margin: 5rem 0.5rem;
      animation: bouncingLoader 0.6s infinite alternate;
    }
    
    .loader > span:nth-child(2) {
      animation-delay: 0.2s;
    }
    
    .loader > span:nth-child(3) {
      animation-delay: 0.4s;
    }
    

    You style the element you want to animate with the animation property and/or its sub-properties. Using this property you can control the timing, duration, and other details of your animation.

    Here you have used the following animation sub-properties:

    animation: animation-name, animation-duration, animation-iteration-count, animation-direction;
    
    • animation-name: Defines the name of your animation which is loader in my case.
    • animation-duration: Configures the length of time which your animation will take to complete one cycle.
    • animation-iteration-count: Tells how many times you want your animation cycle to play before it stops.
    • animation-direction: Defines which direction your animation is going to play.

    Apart from these, there are several other sub-properties as well. You can browse through them in the Mozilla Web Docs.

    Based on these, you have defined my animation as follows:

    animation: bouncingLoader 0.6s infinite alternate;
    

    This line of code does the following three things:

    • Tells the loader element to use our keyframe bouncingLoader.

    • Sets the length of the animation to 0.6 seconds.

    • Runs the animation an infinite number of times.

    • Upon completion of one single cycle, the animation direction alternates i.e., it reverses.

    You have defined these properties for the first circle of your bouncing loader. To target the second (2) and the third (3) circle, you’ve used the nth-child(n) selector, which allows you to select and target one or more elements which are the nth-child of its parent. Moreover, for the remaining span elements, you have just defined the animation-delay, so that each element does not start to animate at the same time.

    The Final Product

    Here’s the complete code of this animated bouncing page loader:

    HTML Code

    <!-- HTML for Bouncing Page Loader -->
    <p>A simple representation of an animated bouncing page loader!</p>
    
    <div class="loader">
      <span></span>
      <span></span>
      <span></span>
    </div>
    

    CSS Code

    /_ CSS for animated bouncing loader. _/
    .loader {
      display: flex;
      justify-content: center;
        align-items: center;
    }
    
    /_ Loader circles _/
    .loader > span {
      background: #FAD000;
      border-radius: 50%;
      margin: 5rem 0.5rem;
      animation: bouncingLoader 0.6s infinite alternate;
    }
    
    .loader > span:nth-child(2) {
      animation-delay: 0.2s;
    }
    
    .loader > span:nth-child(3) {
      animation-delay: 0.4s;
    }
    
    /_ Define the animation called bouncingLoader. _/
    @keyframes bouncingLoader {
      from {
        width: 0.1rem;
        height: 0.1rem;
        opacity: 1;
        transform: translate3d(0);
      }
      to {
        width: 1rem;
        height: 1rem;
        opacity: 0.1;
        transform: translate3d(0, -1rem, 0);
      }
    }
    
    /_ OPTIONAL: Styles for the demo. _/
    body {
      background: #2C294F;
      padding: 2rem;
    }
    
    p {
      font: 1rem/1.45 "Operator Mono";
      color: #A599E9;
      text-align: center;
    }
    

    Here’s a working demo with CodePen for this.

    You can fork this pen and try it out for yourself.

    https://codepen.io/MaedahBatool/pen/wZxMjZ?editors=1100

    Your turn

    After developing this animation, CSS is shown to be amazingly powerful. There are several ways of creating animations like this. We’d love you hear your suggestions and the way you create CSS animations.

    Thanks for reading! If this tutorial was helpful and has piqued your interest, try it out yourself and share your feedback in the comments section below.

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors
    Default avatar
    Maedah Batool

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel