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

Ways to initiate animation using CSS when the page loads

Is there a way to initialize the counter on page load? Even though I was successful in making it start on hover, I couldn't figure out how to make it work when the page loads. Here is the JavaScript code: var root = document.querySelector(':root ...

javascriptcssanimationtextcounter

Is Bootstrap CSS cached by Chrome?

As I began a new project, I decided to tweak the color settings in bootstrap. During debugging in Visual Studio, everything appeared as intended. However, after publishing the site for the first time on a server, I noticed that the color change I made in ...

cssgoogle-chrome

Firefox failing to display CSS files on web pages

My project is deployed on IIS 7.5 and when trying to access it from a different machine using Firefox, all files are rendered except for the CSS files (although they work fine in IE). I have checked that the MIME type for .css files is correctly set up in ...

cssfirefoxiis-7.5

Modifying Copyright Feature in Footer

I am attempting to implement this function within my dark-colored footer: import Typography from '@material-ui/core/Typography'; function Copyright() { return ( <Typography variant="body2" color="textSecondary" align="center"> ...

javascripthtmlcssreactjsmaterial-ui

Is it necessary for CSS Media query to load all the referenced CSS files?

When utilizing a CSS Media Query to assign two different stylesheets, such as desktop.css and mobile.css based on the max-width, how does this process function? Is it necessary for both stylesheets to be loaded by the browser every time, and then the appr ...

htmlcssmobile-safarimedia-queries

Load elements beforehand without displaying them using a div

In order to efficiently manipulate my Elements using jQuery and other methods, I am exploring the idea of preloading them all first. One approach I have considered is creating a div with CSS display set to none, and placing all the elements I need for my w ...

javascriptjqueryhtml

Reduce the transparency of the overlay picture

I have been utilizing the 'Big Picture' template to design a webpage. The overlay.png file adds a lighter background effect by overlaying intro.jpg with a partially transparent blue graphic. Despite my efforts to adjust the opacity and gradient/R ...

htmlcsstemplatesxhtml

Animate CSS during page load

Currently, I am implementing AJAX to dynamically load pages on my website. During the loading process, I wish to incorporate a spinning animation on the logo to indicate that content is being fetched. The jQuery script (although I'm still learning an ...

javascriptjquerycss

Setting up Angular Toolkit via npm installation

After successfully installing the UIKit npm package within an Angular 2 CLI project, what steps should I take to utilize it? I have also installed typings for UIKit (@types/uikit), but I am unsure of how to properly import the package into a controller i ...

cssangulartypescriptnpmuikit

Ways to animate elements while scrolling in React.js?

I am new to using React.JS and currently working on setting up an E-commerce Store. My goal is to have 5 images stack on top of each other and move together as the user scrolls. I used to achieve this effect in Vanilla JavaScript by adding a window.addEven ...

cssreactjsanimationscroll

Modifying an image's height and width attributes with jQuery and CSS on click action

I'm currently developing a basic gallery using HTML, CSS, and jQuery. The objective is to have a larger version of an image display in a frame with an overlay when the user clicks on it. While this works flawlessly for horizontally-oriented images, ve ...

javascriptjquerycssoverlay

I would like my division to split into two halves, each with a width of 50%, and be aligned next to each other using fxLayout

<div fxLayout="row" fxLayoutAlign="space-between" style="background-color: blue;"> <div fxLayout="column" style="width: 50%;">1stOne </div> <div fxLayout="column" styl ...

htmlcssangularlayoutflexbox

Guide to making a Material Design Radial effect animation

I am looking to create a unique toolbar effect by following the material design radial reaction choreography guideline. https://i.stack.imgur.com/6oB8r.gif I want to achieve this using an angular 2 transition, but I need some guidance on how to implement ...

cssanimationangulartypescript

Styles brought in from external sources do not get applied to components

My goal is to create a separate file specifically for storing styles targeted at IE 9-11. In order to achieve this, I have created a file named InternetExplorer.scss and imported it into my main file styles.scss: @import "scss/InternetExplorer.scss"; The ...

cssangularsass

What is the best way to automatically close a modal window after pressing the submit button

Having some trouble with my modal window using pure CSS. Can't seem to get it to disappear after clicking the submit button. Any suggestions on how to hide it properly? Here is the code snippet of both the HTML and CSS for reference. Open to all ideas ...

htmlcss

Failed to add a new entry to the Sharepoint 2013 List

Having trouble saving an item to a SharePoint list using Knockout.js and REST. In my Ajax POST request, I've used ko.toJSON but the entry doesn't show up in the SharePoint list. It's possible that I'm passing the wrong parameter value. ...

jqueryhtmlajaxknockout.jssharepoint-2013

Question: How can I use the jQuery datepicker to ensure that the selected date remains in the

I recently created a webpage using a combination of HTML, PHP, and jQuery. The PHP script is designed to load all data where the date matches the one selected in the text input field generated by the jQuery datepicker. However, I encountered a problem whe ...

javascriptphpjqueryhtmldatepicker

What is the process for extracting specific text from a web page source using Python with Selenium?

The following is the HTML source code: <div class="dropdown-popup"> <a href="/integrations/sources/" class="dropdown-item">Sources</a> <a href="/integrations/destinations/" cla ...

htmlpython-3.xseleniumselenium-webdrivercss-selectors

Avoid prolonging lines in React Styled Components

I am encountering an issue with the lines between the OR. I need to ensure that they do not extend beyond their specified boundaries. To view the code on codesandbox, please visit HERE EXPECTED OUTPUT CODE const OR = styled.div` display: flex; flex- ...

cssreactjsstyled-components

Using XSLT with JavaScript

I am currently working with a set of XML files that are linked to XSLT files for rendering as HTML on a web browser. Some of these XML files contain links that would typically trigger an AJAX call to fetch HTML and insert it into a specific DIV element on ...

javascripthtmlxmlajaxxslt