Navigation animation

navigationAnimation.css

#navigationAnimation {
  margin-top: 7px;
}

#circleG {
  width: 46.666666666666664px;
}

.circleG {
  background-color: #ffffff;
  float: left;
  height: 10px;
  margin-left: 5px;
  width: 10px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  -moz-animation-name: bounce_circleG;
  -moz-animation-duration: 0.6000000000000001s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: linear;
  -webkit-animation-name: bounce_circleG;
  -webkit-animation-duration: 0.6000000000000001s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: linear;
  -ms-animation-name: bounce_circleG;
  -ms-animation-duration: 0.6000000000000001s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-direction: linear;
  animation-name: bounce_circleG;
  animation-duration: 0.6000000000000001s;
  animation-iteration-count: infinite;
  animation-direction: linear;
}

#circleG_1 {
  -moz-animation-delay: 0.12000000000000002s;
  -webkit-animation-delay: 0.12000000000000002s;
  -ms-animation-delay: 0.12000000000000002s;
  animation-delay: 0.12000000000000002s;
}

#circleG_2 {
  -moz-animation-delay: 0.28s;
  -webkit-animation-delay: 0.28s;
  -ms-animation-delay: 0.28s;
  animation-delay: 0.28s;
}

#circleG_3 {
  -moz-animation-delay: 0.36s;
  -webkit-animation-delay: 0.36s;
  -ms-animation-delay: 0.36s;
  animation-delay: 0.36s;
}

@-moz-keyframes bounce_circleG {
  50% {
    background-color: #000000;
  }
}

@-webkit-keyframes bounce_circleG {
  50% {
    background-color: #000000;
  }
}

@-ms-keyframes bounce_circleG {
  50% {
    background-color: #000000;
  }
}

@keyframes bounce_circleG {
  50% {
    background-color: #000000;
  }
}

/* classes below are not part of CSS animation */

.hidden {
    display: none;
}

.float-right {
    float: right;
    margin-left: 1em;
}

navigationAnimation.html

<div class="float-right hidden" id="navigationAnimation">
    <div id="circleG">
        <div id="circleG_1" class="circleG"></div>
        <div id="circleG_2" class="circleG"></div>
        <div id="circleG_3" class="circleG"></div>
    </div>
</div>

navigationAnimation.js

/*!
 * Initialise the navigation animation 
 */
$(document).ready(function () {  

    var navigationAnimationVisible,
        navigationFallback,
        $navigationAnimation;

    // initialises the navigation animation (including fallback for browsers without CSS animations)
    function initialiseNavigationAnimation() {
        
        navigationAnimationVisible = false;
        $navigationAnimation = $("#navigationAnimation");
        navigationFallback = '<img src="/images/navigationAnimation.gif" width="43" height="11" />';
        
        // fallback - initial call to ensure the image is cached before subsequent re-use (present flash to users of unloaded gif)
        if (!Modernizr.cssanimations) {
            $navigationAnimation.html(navigationFallback);
        }
    }

    // Show or hide the navigation animation
    function showNavigating(makeVisible) {

        if ((makeVisible) && (!navigationAnimationVisible)) {

            // Show
            $navigationAnimation.removeClass("hidden");
            navigationAnimationVisible = true;
        }
        else if ((!makeVisible) && (navigationAnimationVisible)) {

            // Hide
            $navigationAnimation.addClass("hidden");
            navigationAnimationVisible = false;
        }
    }

    // Initialise
    initialiseNavigationAnimation();
    
    // Show navigation animation on screen change
    $(window).on("beforeunload", function () {

        // fallback
        if (!Modernizr.cssanimations) {
            $navigationAnimation.html(navigationFallback);
        }

        showNavigating(true);
    });
});