如何在 HTML 中单击按钮后将进度条（使用 Ladda）与按钮绑定？

Question

我有一个进度条和一个按钮点击。现在进度条没有与按钮链接。那么我怎样才能确保：当按钮单击时，进度条开始；从服务器检索结果时，进度条会停止吗？身体能帮忙吗？

我想尝试有一些隐藏字段作为标志来通知进度条，但还没有时间尝试。

HTML 按钮在这里：

<section class="progress-demo">
            <button id="sendRequest_1" onclick="SendRequest(1)" type="button" class="btn btn-danger ladda-button" data-style="expand-left"><span class="ladda-label">Send</span></button></section>

进度条正在使用

<script src="js/spin.min.js"></script><script src="js/ladda.min.js"></script>

进度条在这里：

      <script>
        // Bind normal buttons
       Ladda.bind( 'section:not(.progress-demo) button', { timeout: 2500 } );

        //Ladda.bind( 'input[type=submit]' );

        // Bind progress buttons and simulate loading progress
        Ladda.bind( 'section.progress-demo button', {
            callback: function( instance ) {
                var progress = 0;
                var interval = setInterval( function() {
                    progress = Math.min( progress + Math.random() * 0.1, 1 );
                    instance.setProgress( progress );
                    if( progress === 1 ) {
                        instance.stop();
                        clearInterval( interval );
                    }
                }, 200 );
            }
        } ); 

按钮点击功能来了。

function SendRequest(i){
alert("button clicked!");
//call post to get server response
... say 1s to get response
//how to bind it to progress bar when server response is back??

}

Answer 1

...
var l = Ladda.bind( 'section:not(.progress-demo) button', { timeout: 2500 } );
...

function SendRequest(i){
  $.ajax({
    url: "some.php",
    success: function(data){
      l.stop();
    }
  });
}