How i can get 2 loaders on same page. I am Using pace.js

Question

This is the loader I am working on. The loader portion is working fine. But I also want to move that "balloon" div along with loader, like when the loader is on 0 the balloon will be like down, and when the loader is 100%, the balloon will move upwards like 150px up.

This is the HTML.

<div class="main-load">
    <div class="small-icon">
    </div>
    <div class="pace pace-inactive">
        <div class="pace-progress" style="transform: translate3d(100%, 0px, 0px);" data-progress-text="100%" data-progress="99">
            <div class="pace-progress-inner">
            </div>
        </div>
        <div class="pace-activity">
        </div>
    </div>
    <div class="ballon">
    </div>
    <div class="load-text">
        <strong>Be patient</strong>... Great Adventures Await!
    </div>
</div>

This is some extra script I have included all the stuff along with loader.

<script type="text/javascript">
    $(document).ready(function() {      
        $("<div class='main-load'></div>").appendTo( "body.pace-running" );
        $(".pace").appendTo( ".main-load" );
        $("<div class='small-icon'></div>").appendTo( ".main-load").insertBefore(".pace");
        $("<div class='ballon'></div>").appendTo( ".main-load" );
        $("<div class='load-text'><strong>Be patient</strong>... Great Adventures Await!</div>").appendTo( ".main-load" );
    });

    /*Pace js fucntion*/
    Pace.on('hide', function(){
        console.log('done');
        if($('body#top').hasClass('pace-done') == true)
            $('.main-load').hide();
        else
            $('.main-load').show();
    });
</script>