Long action js part.

long_action.js

<div class="bar hidden">
    <i class="icon16 loading float-right" style="margin-top: 15px;"></i>
    <div class="progressbar width400px green">
        <div class="progressbar-outer">
            <div class="progressbar-inner" id="progressbar-id" style="width: 0;">
            </div>
        </div>
    </div>
</div>

$('#my_button').click(async () => {
    const done = await $.my.sync();
  }
)

$.my = {
  long_url: '?plugin=plugin_id&action=long',
  sync: async function () {
      const wait = ms => new Promise((resolve) => setTimeout(resolve, ms));
      const process = async (processId) => {
        if (!processId) {
          $('.bar').show();
          let init = await $.get($.my.long_url);
          processId = init.processId;
        }
        let response = await $.post($.my.long_url, { processId: processId});
        if (!response.ready) {
            await wait(5000);
            $('.bar').show();
            $('#progressbar-id').css('width', response.progress+'%');
            await process(processId);
        } else {
            $('#progressbar-id').css('width', response.progress+'%');
            setTimeout(function (){
                $('.bar').hide();
            }, 3000);
            return response.ready;
        }
      }
      process();
    }
  }