Learn how to create loading buttons with CSS and JavaScript in this tutorial from W3Schools. You will see examples of different styles and effects of loading buttons, and you can also try them yourself in the online editor. Loading buttons are useful for indicating that a page or a process is in progress. The Javascript is an on click function for the button. This button initializes the Ajax GET request however it also will immediately show the spinner div. This means spinner-div becomes active, there is now a spinner on the page. Then on the Ajax call complete the spinner div gets hidden. There is no more spinner because the Ajax call has finished. Examples Default functionality Currency Decimal Map Overflow Time Select a value: Toggle disable/enable Toggle widget Get value Set value to 5 Default spinner. view source Want to learn more about the spinner widget? Check out the API documentation. Interactions Draggable Droppable Resizable Selectable Sortable Widgets Accordion Autocomplete Button SVG and CSS is all we need for the spinner. I’m going to assume that you’ve already created a project, so we’ll jump right in and start with the spinner — or “pre-loader” as it is also called. SVG is a great option for a spinner. It’s scalable and implementing it is as easy as an image tag. We could make one from scratch, say in Simple Example and Use of jQuery Flexigrid; Step 3: We will use the $("#grid").jqGrid() method to configure the grid options and load data into it. We fetched This event is triggered whenever the value of progress bar changes. Where event is of type Event, and ui is of type Object. Syntax. $ ( ".selector" ).progressbar ( { change: function ( event, ui ) {} }); 2. complete (event, ui) This event is triggered when the progressbar reaches the maximumm value. So a long-running DB query in this context will simply cause the page to take longer to load. For your idea to work, you'd load the skeleton of the page, then use JS to make an AJAX request to a separate URL which will run the long-running query and return a result. Use JS to show/hide the loading indicator as the request starts and ends. The example below slides in the overlay navigation menu downwards from the top (0 to 100% height). Note: In this example, note that the CSS is slightly different from the one above (default height is now 0, width is 100% and overflow-y is hidden (disable vertical scroll, except for small screens)): .

jquery loading spinner overlay example