CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Aditya Singh
Aditya Singh

Reputation: 724

Loading GIF on normal form submit

I don't know if this is possible because according to my concept it is not.Say I have a form:

<form action="/loadLotsOfRecords" method="get">
<input type="text" name="email" />
<input type="submit />
</form>

Now this form takes at least 10-15 seconds to load because of obviously there are lots of record. I know using AJAX i can make a loading GIF and load the records. But is there a way in which without using AJAX I can simply show a GIF in those 15 seconds when the page is loading. If I use windows.load function it only spins on the next page. What I require is instead of browser loading I want a simultaneous loader on my body. Thanks

Upvotes: 11

Views: 61764

Answers (5)

sandeepsinghnegi
sandeepsinghnegi

Reputation: 302

$(document).ready(function(){
  $("#myform").on("submit", function(){
    $("#preloder").fadeIn();
  });//submit
});//document ready
/* Preloder */

#preloder {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    /* background: #000; */
    background: #ffffff;
}

.loader {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border-radius: 60px;
    animation: loader 0.8s linear infinite;
    -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border: 4px solid #056d4d;      
        /* border: 4px solid #f44336; */
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #056d4d;
        /* border: 4px solid #673ab7; */
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border: 4px solid #056d4d;
        border-left-color: transparent;
    }
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        border: 4px solid #056d4d;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        border: 4px solid #056d4d;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        border: 4px solid #056d4d;
        border-left-color: transparent;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page Preloder -->
<div id="preloder">
    <div class="loader"></div>
</div>

<form id="myform">
  <input type="text" name="fname" id="fname" value="" />
  <input type="submit" value="Submit" />
</form>

Upvotes: 1

Rade
Rade

Reputation: 11

$(function () {
    $('form').submit(function () {
        if ($(this).valid()) {
            $(':submit').attr('disabled', 'disabled');
            StartBlockPage()
        }
    });
});

$(function () {
  StartBlockPage()
});

function StartBlockPage() {
    var block_body = $("#body");
    $(block_body).block({
        message: '<div class="fa fa-spinner spinner spinner--steps2 font-large-5"></div><br /><br /><h2>Please wait until the server responds.</h2>',
        overlayCSS: {
            backgroundColor: '#FFF',
            opacity: 0.8,
            cursor: 'wait',
            height: '200vh'
        },
        css: {
            border: 0,
            padding: 0,
            backgroundColor: 'transparent',
        }
    });
}

function CloseBlockPage() {
    var block_body = $("#body");
    $(block_body).unblock();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<html>
<body id="body">
</body>
</html>

Upvotes: 0

Yasin Sunni
Yasin Sunni

Reputation: 292

You need to display a block page using blockUi Js they will be block full page when you click on the submit button you just write submit button click event globally.

$(function () {
    $('form').submit(function () {
        if ($(this).valid()) {
            $(':submit').attr('disabled', 'disabled');
            StartBlockPage()
        }
    });
});

$(function () {
  StartBlockPage()
});

function StartBlockPage() {
    var block_body = $("#body");
    $(block_body).block({
        message: '<div class="fa fa-spinner spinner spinner--steps2 font-large-5"></div><br /><br /><h2>Please wait until the server responds.</h2>',
        overlayCSS: {
            backgroundColor: '#FFF',
            opacity: 0.8,
            cursor: 'wait',
            height: '200vh'
        },
        css: {
            border: 0,
            padding: 0,
            backgroundColor: 'transparent',
        }
    });
}

function CloseBlockPage() {
    var block_body = $("#body");
    $(block_body).unblock();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<html>
<body id="body">
</body>
</html>

Upvotes: 0

kupendra pola
kupendra pola

Reputation: 97

  • You need to use setTimeout function in java script as it enables your loader to load without other elements in your web page being
    highlighted. Purpose of using AJAX is to load required data behind the scenes, that is the reason why your browser tries to display all the other elements in a the page.

          setTimeout(function(){
        Loader.show();  
            $.ajax({
                type: "GET",
                 url: "XXXXXXX.htm",

                 data: { your_data},
                 success:function(result)
                 {
                     Loader.hide();
                 },
                 complete:function(){
                     Loader.hide();
                 },
                 error:function(){
                     Loader.hide();
                 }
                 });

        },1);

Upvotes: 2

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

You simply need to show you loader gif on successful form submission. In this way, the loading gif appears on the page and keeps displaying until the page is redirected to next page after processing. You don't care about hiding the loading unless you are expecting any error in form submission. You should show this loader, only when form has been successfully submitted.

$(document).ready(function(){
  $("#myform").on("submit", function(){
    $("#pageloader").fadeIn();
  });//submit
});//document ready
#pageloader
{
  background: rgba( 255, 255, 255, 0.8 );
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9999;
}

#pageloader img
{
  left: 50%;
  margin-left: -32px;
  margin-top: -32px;
  position: absolute;
  top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="pageloader">
   <img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
</div>

<form id="myform">
  <input type="text" name="fname" id="fname" value="" />
  <input type="submit" value="Submit" />
</form>

Upvotes: 21

Related Questions