An html5 loader used to when the large amounts of data in loading on an application.

 html5 Loader Uses
1)If a Developer getting a large amount of data to load on view page or HTML page then html5 loader came in the picture.

2)HTML Loader helps the viewer to stay on the application because the Request takes a certain amount of time to executes and fetching data.

 3)When data take time to load Json response or any response from your database then html5 loader is very used in this situation

Using  html5 loader user ensure that the data is loading.
Here We using a Loader in JavaScript Function using Ajax Called, 
how to show and hide the html5  loader. 
When data takes time to Display Show Loader. If we get Data then Hide Loader. This thing we have to write in the javaScript function. 

 There are many HTML loader online but this loader is simple with Look and Feel.

HTML Image
Loader With Javascript Function Ajax

Loader With Javascript Function Ajax


Here is an HTML loader example. 

<body>
 
 

  
Loader With Javascript Function

   

  
 


 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
 !-- cnd file for javascript and jquery-->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

  <script type="text/javascript">
            function myFunction() {
    
             //here you can check for Blank 
                if (document.getElementById("empname").value == '' || document.getElementById("empname").value == null) {
                    alert("Please Insert a Value");
                    return false;
                }

             //showing Loader
                $('.loader').show();
                $.ajax({
                    url: "Your api or action class",
                    data: {}, //past your value to Controller 
                    async: true,
                    success: function (data) {
     //as what you are returning base on that conditions
                        if (data !=null) {
                            $('.loader').hide();//hide loader
                            alert('Success!');
                        } else { //if data is null the hide loader
                            $('.loader').hide();
                            alert('Something went wrong! or data not Present');
                        }
                    }, error: function (jqXHR, textStatus, errorThrown) {
                        $('.loader').hide();//if error then hide data
                    }
                });
            }
            </script>
</body>

if you want this Loader image you can get from here  Download it and used it.
Tags

Post a Comment

Post a Comment

Previous Post Next Post