javascript - 我如何在同一页面上获得 2 个装载机。我正在使用pace.js

Question

这是我正在研究的装载机。装载机部分工作正常。但我也想随着加载器移动那个“气球”div，比如当加载器为 0 时，气球会向下，当加载器为 100% 时，气球会向上移动 150px。

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