Code 3

<div id='loader'>

<div class='preload-juggle'>

  <div class='ball'></div>

  <div class='ball'></div>

  <div class='ball'></div>

</div>

</div>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

    <script type='text/javascript'>

        $(window).load(function () {

            setTimeout(function () {

                $(&quot;.preload-juggle&quot;).fadeOut(&quot;slow&quot;);

                setTimeout(function () {

                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)

                }, 1000)

            }, 1000)

        });

    </script>

<style>

#loader {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #16A085;z-index: 1000}

.preload-juggle {width: 300px;height: 300px;position: absolute;top: 50%;margin-top: -150px;left: 50%;margin-left: -150px;}

.preload-juggle div {position: absolute;width: 21px;height: 21px;border-radius: 10.5px;background: #1BBC9B;margin-top: 150px;margin-left: 150px;animation: juggle 2.1s linear infinite;}

.preload-juggle div:nth-child(1) {animation-delay: -0.7s;}

.preload-juggle div:nth-child(2) {animation-delay: -1.4s;}

@keyframes juggle {

0% {transform: translateX(0px) translateY(0px);}

12.5% {transform: translateX(25px) translateY(-55px) scale(1.1);background: #36D7B7;}

25% {transform: translateX(50px) translateY(0px);animation-timing-function: ease-out;  }

37.5% {transform: translateX(25px) translateY(55px);}

50% {transform: translateX(0px) translateY(0px);}

62.5% {transform: translateX(-25px) translateY(-55px) scale(1.1);animation-timing-function: ease-in; }

 75% {transform: translateX(-50px) translateY(0px);animation-timing-function: ease-out;}

87.5% {transform: translateX(-25px) translateY(55px); }

100% {transform: translateX(0px) translateY(0px);}

}

</style>