Show loading bar or gif while a php shell_exec runs in background

I have this php page that rungs its script. From the index page the user clicks a button and this page, after 10 seconds or so, shows the final result. I would like to show a progress bar while the user waits. This is the actual page:

<!DOCTYPE html>
<html>
<head>
  <title>METAR LIRN</title>
  <style>
    h1 {
      text-align: center;
    }
    .table {
      display: table;
      margin-top: 30px;
      margin-left: auto;
      margin-right: auto;
      border: 1px solid #808080;
      padding-left: 30px;
      padding-right: 30px;
      padding-bottom: 10px;
    }
  </style>
</head>
<body>
    <div class="table">
    <div>
    <h1>METAR LIRN<h1>
    </div>
    <div>
           <?php
                $output = shell_exec('sh /var/www/html/weather.sh');
                echo "<pre>$output</pre>";
            ?>
    </div>
</body>
</html>

I had a look to other similar posts with no luck... Thanks in advance!

Solution

Sure, here's a quick example:

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* Just some styles for the bar */
        .loading-bar {
            background: blue;
            width: 300px;
            height: 20px;
            display: none;
        }
            .loading-bar.active {
                display: block;
            }
    </style>
</head>
<body>
    <button class="myBtn">Execute code!</button>
    <div class="response"></div>
    <div class="loading-bar"></div>

    <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
    <script>
        // Handle button click
        $('.myBtn').on('click', function(){
            $('input').val( "" );

            // Inmediatly show your bar
            var $loadingBar = $('.loading-bar');
            $loadingBar.addClass('active');

            // Then execute Ajax
            $.ajax({
                url: "test.php",
                method: 'GET'
            })
            .done(function(data) {
                // Display response data
                $('div.response').html(data);
            })
            .fail(function(error) {
                // Display error if fails
                $('div.response').html(error);
            })
            .always(function() {
                // Always hide loading bar when finish
                $loadingBar.removeClass('active');
            });
        });
    </script>
</body>
</html>

test.php:

<?php
sleep(2);
echo 'OK';