Perfectly aligning the Update Progress Animation in real-time

I am currently utilizing the Ajax UpdateProgress with a loading gif attached. The issue I am facing is how to ensure that the loading.gif always appears in the center of the screen, even if the user is at the very top or bottom of the page. Is there a method to keep it consistently centered? My goal is for users to always see the loading gif in the center so they are aware that the page is still loading.

.CenterPB
    {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -20px; /* adjust this value based on your image/element height */
        margin-left: -20px; /* adjust this value based on your image/element width */
        width:auto;
        height:auto;
    }

   <asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="false">
    <ProgressTemplate>
        <div class="CenterPB" style="height: 40px; width: 40px;">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/App_Themes/Default/images/progressbar1.gif"
                Height="35px" Width="35px" />
            Loading ...
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

Many thanks!

cssajaxupdateprogress

Answer №1

My understanding is that you prefer it to remain centered, even while scrolling. In that case, you will need to update:

    position: absolute;

to

    position: fixed;

Answer №2

To keep the loading image centered in the browser window even when the user scrolls, you can use the CSS property "position: fixed;". This will ensure that the image stays fixed to the browser window and not the page.

Check out this demo to see it in action: http://jsbin.com/ifimek/edit#javascript,html,live. Feel free to try scrolling and see how the image remains centered!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover how to apply unique styles to specific HTML elements using their index values in jQuery

In the process of creating a party game similar to Tambola or Housie, I am faced with the challenge of automatically detecting and highlighting the numbers called out on each ticket in the game. For instance, if number 86 is announced, I aim to visually di ...

javascripthtmljquerycsshtml-table

Utilizing ng-class with Boolean values in AngularJS

On my page, I have a pair of buttons that control the visibility of elements using ng-hide and ng-show. <a ng-click="showimage=true" ng-class="{ 'activated': showimage}" class="button">Images</a> <a ng-click="showimage=false" ng-c ...

javascriptcssangularjs

Implementing a Standardized Template for Consistent Design and styling Throughout Website

As I work on building my website, I find myself struggling with some of the intricacies. The homepage is set up with a navbar and header, along with several pages that can be easily navigated to. While everything seems to be functioning properly, upon ins ...

javascripthtmlcss

Tips on how to pass properties as arguments to mixins

Here is the code I have: mox(first, second) {first} second a mox(transition, 0.3s linear all) I want to call the mixin like this: mox(transition 0.3s linear all) If we modify mox, it would look like this: mox() arguments a mox transition 0.3 ...

cssnode.jsstylus

"Navigation Side Menu: w3-sidebar with hamburger toggle feature

If you are looking to implement the w3-sidebar, you can find it here: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_over The existing code uses a "hanburger" icon to open the side menu and a "Close X" menu item to close it. To simpl ...

jqueryhtmlcss

Styling each individual page in R Shiny with CSS

I've created an R shiny application and am in the process of adding styling to it. I've incorporated some HTML code and want to customize elements like the background color using CSS. After doing some research online, I learned that I should use ...

htmlcssruser-interfaceshiny

Learn the process of utilizing AJAX to upload files in CodeIgniter

I have reviewed several solutions How to upload files using ajax in codeigniter File uploads in codeigniter through ajax but none seem to work with my specific code. I am trying to implement a feature where users can upload various types of files (such ...

phpjqueryajaxcodeigniter

Model-View-Controller: "There was an error with the System.Web.HttpException. The public action method 'Delete' could not be located on the 'SHP.Controllers.EmployeeController' controller."

I need to remove a row from my grid. Unfortunately, I can't use [HttpDelete] in my Controller's Delete method because it's not compatible with all browsers. For more information, check out this link. Here is the EditorTemplate for displayin ...

jqueryasp.net-mvcajax

Is it recommended to place JavaScript/CSS at the bottom of an HTML document?

I am currently utilizing jQuery Mobile, and at the moment, my <head> section looks like this: <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <title>help</title> <link ...

javascriptjqueryhtmlcssjquery-mobile

Issue encountered when attempting to redirect following a jQuery Ajax request

I attempted to create a redirection mechanism upon receiving a successful response from the server. I followed instructions here, but unfortunately, I couldn't get it to work as intended. Below is the function responsible for sending data to the serv ...

javascriptjqueryajaxhttp-redirect

What is the best way to line up a Material icon and header text side by side?

Currently, I am developing a web-page using Angular Material. In my <mat-table>, I decided to include a <mat-icon> next to the header text. However, upon adding the mat-icon, I noticed that the icon and text were not perfectly aligned. The icon ...

htmlcssangulartypescriptangular-material

Tips for customizing the appearance of a mat-select chosen item?

Is there a way to modify the color of the selected option text in a mat-select component within an Angular 15 project? .html <mat-form-field> <mat-label>From</mat-label> <mat-select panelClass="mat-select-red"> ...

cssangularsass

The vertical drop-down menu is displaying and functioning incorrectly

My vertical submenu is positioned correctly, but the links are overlapping on top of each other. The submenu doesn't hide when hovering over the main menu, but it does hide when hovering outside the menu. I'm unsure of what changes or additions t ...

csssubmenuonhover

Issues with AJAX requests failing to fire with the latest version of jQuery

A small script I have checks the availability of a username in the database, displaying "taken" if it's already taken and "available" if it's not. The code below works perfectly with jQuery v1.7.2. However, I need to update it for jQuery v3.2.1. ...

javascriptjqueryajax

CSS3 Feature: Chevron-shaped banner with jagged edges

I'm currently working on building a unique chevron-style banner using CSS3, but I've run into some aliasing problems specifically in Chrome. Despite trying to utilize the -webkit-backface-visibility: hidden attribute, I still can't seem to r ...

htmlcss

Adjust the size of images using jQuery to perfectly fit the container dimensions

I am currently working on a script to automatically resize images that are too large for the container: $('img').each(function(i){ var parent_width = parseInt($(this).parent().width()), image_width = parseInt($(this).width()); ...

javascriptjquerycssimage

Using Jquery in combination with Bootstrap modal and PHP for website

Upon submission of a form with numerous fields, I aim to display a bootstrap modal popup that prompts the user with a question before data is saved in the database. The user can respond with either "yes" or "no", leading to different actions being taken ba ...

phpjqueryajaxtwitter-bootstrapmodal-dialog

Trimmed scrollbar and border in Webkit

There seems to be some clipping on the scrollbar and border of the textarea: <!DOCTYPE html> <html> <head> <meta charset="UTF-8> <title>Scrollbar and Border Clipping Issue in Webkit</title> <style> ...

htmlcsswebkittextareascrollbar

Adjusting content within a div using a loop with a pause interval

I am working on a project where I need to manipulate the content of a div. Here is the initial code snippet: <div class="mytext">first</div> My goal is to dynamically change this text from 'first' to 'second' after 5 s ...

jqueryhtmlcss

An error occurred while attempting to save a new entry using the New Entry Form in DataTable, stating that the variable "

I have encountered an issue with a table that includes a bootstrap modal containing a form. After filling out the form and saving the data or closing the modal, I want to refresh the table data. However, I am receiving the following error: TypeError: c i ...

javascriptjqueryajaxtwitter-bootstrapdatatables