CodeKhel

<html>   <head>     <style>       #Progress_Status {         display: block;         position: relative;         width: 100%;         height: 35px;         background-color: #ddd;         margin: auto;         text-align: center;       }       #myprogressBar {         position: absolute;         left: 0;         width: 1%;         height: 35px;         background: #4CAF50;         text-align: center;         line-height: 32px;         color: black;         margin: auto;               }     </style>   </head> ...

  I have a project in which I use MVC C#, with Bootstrap and FontAwesome. My objective is to show a spinner and disable the page while waiting for an ajax request. So far, I have successfully acomplished this goal with the following code: HTML: <div id = 'ajax_loader' style = " position : fixed ; left : 50% ; top : 50% ; display : none ; " > <img src = "~/Images/ajax-loader.gif" > </div> JS: function blablabla () { //show spinner, disable page var modal = $ ( '<div>' ). dialog ({ modal : true }); modal . dialog ( 'widget' ). hide (); $ ( '#ajax_loader' ). show (); $ . ajax ({ type : "Get" , url : url , success : function ( result ) { alert ( "success! " + result ); }, error : functi...