How to position preloader at the center in materializeCSS

Given this situation:

I attempted to implement this Preloader with position:fixed and centered. My approach was as follows:

.loader {
  position:fixed;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<body>
  <div class="preloader-wrapper big active loader">
    <div class="spinner-layer spinner-blue-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div><div class="gap-patch">
        <div class="circle"></div>
      </div><div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>
</body>

This implementation results in an animation disappointment.

htmlcssmaterialize

Answer №1

By ensuring that your container has a set width and height, you can easily center the element both horizontally and vertically. Check out this JSfiddle for an example.

.loader {
position: absolute;
top :0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

Answer №2

Modified the design of the loader to prevent the scrollbar from appearing randomly 

<div className="preloader-wrapper big active loader">
    // spinners
</div>

.loader {
  position: absolute;
  margin: auto;
  top: 50vh;
  bottom: 50vh;
  left: 0;
  right: 0;
}

Answer №3

This solution worked wonders for me

main.html

<div class="spinner">
      <div class="loading-wrapper medium active">
        <div class="spin-layer spin-blue-only">
          <div class="circle-clip left">
            <div class="circular"></div>
          </div>
          <div class="gap-fill">
            <div class="circular"></div>
          </div>
          <div class="circle-clip right">
            <div class="circular"></div>
          </div>
        </div>
     </div>
</div>

custom-style.css

.spinner {
  position: fixed;
  bottom: 25%;
  right: 75%;
}

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

Programmatically adjusting the color of mask images - Creative image theming

Is it possible to alter the color of an image hosted on a different website? Here is a link to an example image: Is there a technique to overlay a specific color on the image and only modify certain colors, such as changing or adding a layer of light gre ...

phpjquerycsshtmlimage-manipulation

Instructions on setting div opacity when Overflow is set to visibleExplanation on setting opacity for div with Overflow

In my HTML code, I have a div element and an image tag stacked one on top of the other. The div is smaller than the image. I have set the overflow property to visible for the div. My query is, when I add an image to the image tag, the content that overflow ...

javascriptjqueryhtmlcss

Canvas drawImage function not displaying image at specified dimensions

I'm having trouble loading an image into a canvas using the drawImage function. Additionally, I've implemented drag functionality but found that when moving the image inside the canvas, it doesn't follow the mouse cursor in a linear manner. ...

javascripthtmlcanvashtml5-canvas

Displaying a specific division solely on mobile devices with jQuery

I need to implement a feature where clicking on a phone number div triggers a call. However, I only want this div to be displayed on mobile devices. To achieve this, I initially set the div to "display:none" and tried using jQuery to show it on mobile devi ...

javascriptjqueryhtmlcss

Is there a way to select only a single line from an HTML document?

Is there a way to extract just one specific line from an HTML file? Let's say we have the following file: <!DOCTYPE html> <html> <head></head> <body> This is a test string. This is another test st ...

javascriptphphtml

"What is the best way to access and extract data from a nested json file on an

I've been struggling with this issue for weeks, scouring the Internet for a solution without success. How can I extract and display the year name and course name from my .json file? Do I need to link career.id and year.id to display career year cours ...

javascripthtmlangulartypescriptionic-framework

Is there a way to prevent my Header links from wrapping during window size testing?

https://i.stack.imgur.com/YTc3F.png The image above showcases my standard header layout, while the one below illustrates what occurs as I resize the window. https://i.stack.imgur.com/re44T.png Is there a specific CSS solution to prevent the Text navLink ...

cssmaterial-ui

Exploring the process of constructing this form with the assistance of Bootstrap

Create Dropdown Form https://i.sstatic.net/rqJtS.png I am looking to create a form that allows for updating team scores based on kills. I am struggling to divide the form into 2 sections for input, as demonstrated. I am using only bootstrap for styling, ...

htmlformsbootstrap-5

What is the process for changing the border color of a Select Component?

Is there a way to change the border color of a select component in Material UI library without directly setting the property in inspect elements? I can see it working when I set the property that way, but how can this be achieved using class override? htt ...

cssreactjsmaterial-ui

The styling of a CSS class in Internet Explorer may not be applied correctly if there are multiple elements sharing the same class name

For nearly a full week now, I've been plagued by a persistent issue! Here's the situation: I have 6 step tabs - step 1, step 2, and so on. Each tab has a CSS class called "locked" and "active." "Locked" - this style features top: 3em;, causing ...

javascriptjquerycssinternet-explorer

How can you adjust the dimensions of a child div?

Hey there! I've got a div called bat. #bat{ width:50%; height:50%; } Here's the HTML: <div id="bat">dynamic div will appear here</div> When dynamic content is placed inside the div and it's larger than #bat, th ...

jquerycss

Does "br" not play well with flexbox?

After creating a table using flexbox, I made an interesting observation: the br element seems to have no effect within the flexbox. For example: .flexbox { display: flex; flex-wrap: wrap; border: 2px solid red; padding: 2px; } .item { width: ...

htmlcssflexbox

How to use Javascript to set focus on a dropdown list within a PHP script

Having trouble setting focus on the dropdown list in my PHP page dc-test.php, where there are two dropdown lists that are interdependent. The values for these dropdown lists are fetched from a database table. I am unable to set focus on the first dropdown ...

phpjavascripthtmlfocus

Utilizing Bootstrap classes alongside custom CSS within Next.JS

Recently, I've been diving into the world of Next.JS and attempting to integrate it with Bootstrap. However, I've encountered a roadblock - the inability to combine Bootstrap classes with my own custom CSS classes within the className attribute. ...

htmlcsstwitter-bootstrapnext.js

Tips for keeping a div centered even when the window is resized to smaller than the background width

I need help with centering a background image within a content div that is inside a wrapper container. When the browser window is resized to less than 500px, the background image starts to cut off from the right side. How can I ensure the background image ...

htmlcss

Load image in index.html for use on a different webpage

I'm looking to preload a large image that serves as the background on another page of my website. By preloading this image, I hope to ensure that when users first visit my webpage, the image is ready to load instantly when they eventually navigate to ...

htmlimagepreload

Tips for showcasing heading and paragraph elements side by side in css?

I have a block of HTML code that includes a heading and two paragraphs: <div class="inter"> <h4>Note</h4> <p>To add/remove a dependent or to modify your spouse's insurer information, go to the My Life Events section and foll ...

htmlcss

Using Python with Selenium, automate the process of clicking on each list item within

Hey there! I recently implemented the code below, and it worked perfectly. However, I'm now trying to figure out how to make it click on all the li items within a ul that have an empty class attribute. Any ideas on how to do this using Xpath? Xpath: ...

htmlpython-2.7python-3.xselenium-webdriveriteration

Show the picture stored in the S3 cloud storage

I'm facing an issue with displaying images uploaded to S3. I've checked the permissions and can access the URL successfully to retrieve data. However, when I insert the URL into an image tag, it shows up as a broken link. Upon inspecting the net ...

htmlnode.jsamazon-s3vue.js

Issue with displaying Bootstrap Tooltip

Recently, I launched a fresh website (currently residing on a sub-domain). However, I am facing an issue with the tooltip not showing up when hovering over the text Get the FinEco Bookmarklet. <span class="bookmarklet"><span class="fa fa-bookmark ...

htmlcsstwitter-bootstraptooltip