javascript - 同じページで 2 つのローダーを取得する方法。私はpace.jsを使用しています

Question

これは私が取り組んでいるローダーです。ローダー部分は正常に動作しています。しかし、ローダーが0のときはバルーンが下のようになり、ローダーが100％のときはバルーンが150pxのように上に移動するように、その「バルーン」divもローダーとともに移動したいと思います。

これが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>

これは、ローダーとともにすべてのものを含めた追加のスクリプトです。

<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>