Displaying the Ionic loading spinner on the entire page rather than a restricted small box

Right now, I'm able to implement a basic loading effect, but it appears as a small box.

presentCustomLoading() {
  let loading = this.loadingCtrl.create({
     content: 'Loading Please Wait...'
  });

  loading.present();    

}

However, I have been tasked with creating a full-page loader like the one shown below:

https://i.sstatic.net/Zv8YQ.png

The loader should cover the entire page, with a black background and a transparent appearance similar to the image. It does not need to have the wave effect. Any suggestions on how to achieve this?

htmlcssangularionic-frameworkionic3

Answer №1

With a little CSS magic, you can achieve the desired result.

html

this.loading = this.loadingCtrl.create({
    spinner: 'spinner',
    content: `
    <div class="login_view">
        <div class="loader_view">
            <div class="cst_loader"></div>
        </div>
    </div>`,
    showBackdrop: showBackdrop
});
this.loading.present();

ts

.login_view{
    background: url(../../assets/imgs/login_bg.png) no-repeat 100% 100%;
    background-size: contain;
}
.loader_view{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Answer №2

After some trial and error, I found a solution that works perfectly for me. I focused on styling the loading-wrapper element.

app.scss

.loading-wrapper {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 100% !important;
    max-height: 100% !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.ts

 let loader = this.loadingCtrl.create({
      content:
        `<div class="custom-spinner-container">
        Please wait...
      </div>`,
    });
    loader.present();

UI:

https://i.sstatic.net/nlCGJ.gif

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

Issue with the gulp-babel plugin: Files within the Plugin/Preset should only export functions, not objects

I have started to integrate JavaScript 2015 (ES6) into my Ionic v1 app: package.json { "name": "test", "version": "1.0.0", "dependencies": { "@ionic-native/deeplinks": "^4.18.0", "cordova-android": "7.0.0", "cordova-android-support-gra ...

javascriptionic-frameworknpmbabeljspackage.json

Wave Filter in SVG

While attempting to create a fisheye-esque filter in my SVG, I came across this interesting codepen example: http://codepen.io/johanberonius/pen/RopjYW The effect works well, but I would like it to be a bit more pronounced. Unfortunately, I am unable to m ...

javascriptcsssvgfiltermapping

jQuery - patience is required until all elements have completely faded away

I am facing a unique challenge: I need to trigger an action after two specific elements have been faded out simultaneously. The code snippet for this task is as follows: $("#publish-left, #publish-right, #print-run").fadeOut(function(){ //do something ...

javascriptjqueryhtml

Material-UI's JSS does not adhere to the justify content property

Having trouble aligning elements in my React app using material-ui 1.0 and its JSS solutions. The code I've written below should center justify, but it's not working no matter how I configure it. I suspect there might be a naming issue since mat ...

javascriptcssreactjsmaterial-uijss

button click event blocked due to unforeseen circumstances

Recently, I've been attempting to change the CSS properties of a div by triggering a click event. However, no matter what I do, it doesn't seem to be working and it's starting to frustrate me. Can anyone shed some light on why this might be ...

javascriptjqueryhtmlcss

Adjusting the width of a Material UI select/dropdown component

In my material-ui grid setup, each <Grid> contains a <Paper> element to define the grid's boundaries precisely. Inside every <Paper>, there is a custom <DropDown> component (a modified version of Material-UI's Select). I ...

cssreactjsmaterial-ui

The autocomplete feature in the hotel name field is designed to recognize HTML-encoded entities, thanks to the combination of

I keep encountering this issue. "King & Grove Hotel" is displaying as "King &amp; Grove Hotel" This problem arises while using jQuery autocomplete. ...

jqueryhtml

Having two owl carousels on one page is causing some issues

Struggling to implement two owl carousels on my page. Gif: View Gif Here The first carousel (shown at the top in the gif) is functioning perfectly. However, the second one (beneath the first in the gif) is not behaving as expected. Instead of displaying ...

htmlcssowl-carouselowl-carousel-2

Is there a method to programmatically clear cache in an Angular 7 application?

I am facing an issue with my component that lazy loads images. The first time the page loads, the images are displayed using lazy loading. However, if I refresh, reload, or close and reopen the tab, the images are pre-loaded from the cache. Is there a wa ...

javascriptangular

Tips for ensuring Node.js waits for a response from a substantial request

When uploading a large number of files, the process can take several minutes. I am currently using a multi-part form to post the files and then waiting for a response from the POST request. However, I am facing issues with timeouts and re-posting of files ...

javascripthtmlnode.jsexpressmultipartform-data

How to build a login page with a static header and footer using Angular2

For my latest project, I am currently in the process of developing an application using Angular2 and eclipse Neon. Utilizing angular-cli for this app, I am now focused on creating the login page. Within the app.component.html file, you will find the follow ...

cssangulartypescript

What is the best way for me to automatically square a number by simply clicking a button?

How do I create a functionality that multiplies a number by itself when a specific button is clicked? I want this operation to only occur when the equals button is pressed. I have been attempting to set this up for over an hour without success. My current ...

javascripthtmlcalculatorcalc

Is it necessary for me to develop an Angular library in order to release a basic TypeScript class that makes use of Angular components?

In one of my Angular projects, I have a Typescript class called APIResponse that I want to convert into an NPM package for use in other projects. This class is not specific to Angular like a Service or Component. After doing some research on creating non-A ...

angulartypescriptnpm

What's the best way to place my image inside a Bootstrap Accordion so that it is housed within the accordion-item?

I've been facing an issue with a Bootstrap Accordion. Everything works fine, except when I try to insert an image <img src="https://placehold.co/600x400" class="img-fluid" /> into an accordion-item <div class="accord ...

htmlcssbootstrap-5accordionbootstrap-accordion

Create a JavaScript button that redirects to a different page within a React application

I am creating a div element using a for-loop and I want to link each div to the "/campaign" page with its respective id. When a div is clicked, I want it to navigate to the "/campaign/id" page and pass the id to the Campaign component. class Home extends ...

javascripthtmlreactjsreact-router

Code Wizard

I am currently working on a project to develop an HTML editor. How it Needs to Function Elements Inside: Text Area - Used for typing HTML as text Iframe - Displays the typed HTML as real [renders string HTML to UI] Various Buttons Functionality: When ...

javascriptjqueryhtmlregexeditor

resetting the page's scroll position using a hamburger icon

After adding a hamburger icon to my web project, I noticed that whenever I click on the icon, it scrolls back to the top of the page. I tried adjusting the margin and padding properties, but it still behaves the same way. Even after removing the animation ...

htmlcss

When the screen width is halved, Bootstrap pushes my content downwards

<div class="container"> <img style="float:left" src="assets/images/logo.png" alt="university logo"> <h1 style="float:left;color:white;padding-top:20px;text-align:center;margin-left:10%"> Welcome To SURE Model</h1> <a ...

htmlcssbootstrap-4

Is it possible to separate the words in my navigation bar to create more spacing and change the color of the text to white?

I've been attempting to create a navigation bar without much success. My goal is to position the words "Main Page", "About Me", and "Bibliography" with space between them, aligned left, center, and right respectively. Additionally, I want to change t ...

htmlcss

What is the best way to extend the width of an element within a Bootstrap column beyond the column itself?

Apologies for any language errors, but I have a query regarding Bootstrap. I am currently working on making a website responsive and I have a row with 4 columns set up like this: The "seeMore" div is initially hidden and on clicking the boxToggle element ...

javascriptjqueryhtmlcsstwitter-bootstrap