Question 199053 in Html Question posted in
Some basic documentation can be found here.

Html – I want to create a spinner after submitting the form. I have a flask endpoint to do calculation and will redirect to new page

I want to create a spinner after submitting the form. I have a flask endpoint to do calculation and will redirect to new page after doing the calculations.
I have created html form for submit. A spinner should come after submitting the form

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 
        <!DOCTYPE html>
<html>
<head>
    <title>Spinner Example</title>
    <style>
        /* CSS for spinner animation */
        .spinner {
            width: 40px;
            height: 40px;
            position: relative;
            margin: 100px auto;
        }

        .spinner:before {
            content: '';
            display: block;
            width: 25px;
            height: 25px;
            margin: 8px;
            border-radius: 50%;
            border: 3px solid #ccc;
            border-top-color: #333;
            animation: spinner 1s ease-in-out infinite;
        }

        @keyframes spinner {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
    <script>
        // JavaScript code to handle the form submission and spinner display
        function submitForm() {
            // Show the spinner animation
            document.getElementById('spinner').style.display = 'block';

            // Disable the form submit button
            document.getElementById('submitBtn').disabled = true;

            // Submit the form
            document.getElementById('myForm').submit();
        }
    </script>
</head>
<body>
    <h1>Spinner Example</h1>
    <form id="myForm" action="/calculate" method="POST">
        <!-- Your form fields here -->
        <input type="text" name="inputField" required>

        <!-- Spinner element -->
        <div id="spinner" class="spinner" style="display: none;"></div>

        <!-- Submit button -->
        <input id="submitBtn" type="button" value="Submit" onclick="submitForm()">
    </form>
</body>
</html>

  2. 0 
        <!DOCTYPE html>
<html>
<head>
    <title>Spinner Example</title>
    <style>
        /* CSS for spinner animation */
        .spinner-overlay {
    /* Existing styles */
    backdrop-filter: blur(5px);
}

.blur-content {
    filter: blur(5px);
}
        .spinner-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .spinner {
            width: 40px;
            height: 40px;
            position: relative;
        }

        .spinner:before {
            content: '';
            display: block;
            width: 25px;
            height: 25px;
            margin: 8px;
            border-radius: 50%;
            border: 3px solid #ccc;
            border-top-color: #333;
            animation: spinner 1s ease-in-out infinite;
        }

        @keyframes spinner {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
    <script>
        // JavaScript code to handle the form submission and spinner display
        function submitForm() {
            // Show the spinner overlay
            document.getElementById('spinner-overlay').style.display = 'flex';

            // Disable the form submit button
            document.getElementById('submitBtn').disabled = true;

            // Submit the form
            document.getElementById('myForm').submit();
        }
    </script>
</head>
<body>
    <h1>Spinner Example</h1>
    <form id="myForm" action="/calculate" method="POST">
        <!-- Your form fields here -->
        <input type="text" name="inputField" required>

        <!-- Spinner overlay -->
        <div id="spinner-overlay" class="spinner-overlay">
            <div class="spinner"></div>
        </div>

        <!-- Submit button -->
        <input id="submitBtn" type="button" value="Submit" onclick="submitForm()">
    </form>
</body>
</html>
    Login or Signup to reply.
  3. 0 
    <div class="table-responsive">
    <table class="table table-striped table-bordered table-sm" data-sortable="true">
        <thead class="fixedHeaderFiles">
            <tr>
                <th style="width:50px">#</th>
                <th style="width:300px" data-sortable="true">Report</th>
                <th style="width:100px">Download</th>
            </tr>
        </thead>
        <tbody class="scrollContentFiles">
            {% set rLocation = {'loc': ""} %}
            {% for report, loc in report_dict.items() %}
            <tr>
     <td style="width:50px">{{loop.index}}</td>
             <td style="width:300px">{{report}}</td>
             <td style="width:100px">
                 {% if rLocation.update({'loc': report_dict[report]}) %}
                 {% endif %}
                 <a href="{{ url_for('download_executionhistory', report_location=rLocation.loc) }}">
                     <img src = "/static/images/download-icon.png" align="center" width=20 height=20>
                 </a>

             </td>
            </tr>
            {% endfor %}

     </tbody>
 </table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search