Any tips on how to personalize the loading animation for single pages using CSS and GIFs?

 presentLoading(message) {

this.loading = this.loadingCtrl.create({
  dismissOnPageChange: false,
  spinner:'hide',
  content:`<img class="load" src="assets/dual.gif" />`,
});
this.loading.present();

}

Hello there! I am working with the Ionic framework and I have shared my code here. I need to customize the image for a single page only, as I can only apply common styles across all pages. Any advice on how to achieve this customization would be greatly appreciated. done

ion-loading{
.loading-wrapper{
  padding:0px 15px !important;
}
}

Answer №1

Customizing loaders and styles for different components is possible. For example:

Page A

presentLoading(message) {
    let loading = this.loadingCtrl.create({
      cssClass: 'page-a',
      dismissOnPageChange: false,
      spinner: 'hide',
      content: `<img class="load" src="assets/loader-a.gif" />`,
    });
    loading.present();
}

.page-a {
  // ADD YOUR CUSTOM STYLES HERE
}

Page B

presentLoading(message) {
    let loading = this.loadingCtrl.create({
      cssClass: 'page-b',
      dismissOnPageChange: false,
      spinner: 'hide',
      content: `<img class="load" src="assets/loader-b.gif" />`,
    });
    loading.present();
}

.page-b {
  // ADD YOUR CUSTOM STYLES HERE
}

If you need a common loader, create a loader service like the following:

import { Injectable } from '@angular/core';
import { LoadingController } from 'ionic-angular';

@Injectable()
export class LoaderService {

    public loading: any;

    constructor(publicloadingCtrl: LoadingController) { }

    async show(loaderClass, image) {
        if (!this.loading) {
            this.loading = await this.loadingCtrl.create({
                cssClass: loaderClass,
                dismissOnPageChange: false,
                spinner: 'hide',
                content: `<img class="load" src="'+image+'" />`
            });
            this.loading.present();
        }
    }

    async hide() {
        if (this.loading) {
            await this.loading.dismiss();
            this.loading = null;
        }
    }

}

Import the loader service into your page:

import { LoaderService } from './../loader/loader.service';

constructor(private loader: LoaderService) {
}

async doSubmit() {
    await this.loader.show('LOADER_CLASSNAME', 'YOUR_LOADER_IMAGE');
    ...perform actions here
    this.loader.hide();
}

In this scenario, you can specify custom class and image by passing them as arguments.

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

The height of the href is not displaying correctly when the text-decoration is disabled and it is placed next to

In my design, I have a link positioned next to an image with perfect vertical alignment. Everything looks great when the text has the standard text-decoration, centered vertically and all that. However, as soon as I remove the text-decoration, leaving the ...

Discover the simple steps to integrate a timezone dropdown feature into your WordPress website using the Contact Form 7 plugin

I am designing a website and I need to implement a query form with a customizable time zone selection. Are there any specific steps to add a time zone drop-down menu using Contact Form 7? Here is the desired result I'm aiming for: Your assistance wil ...

Angular 7 fails to send XHR request

This is my initial question, so I'll try to keep it concise. Here is the Angular method that I am using: delete(id: number): Observable<User[]> { console.log(id); return this.http.delete(`${this.baseUrl}/deleteUser`) .pipe(map(re ...

Using Handlebars, you can easily interpolate variables within an "each" loop

I have integrated this code into an express app that utilizes handlebars as its template engine: res.render("movies", { data: pages, arraypages:arrayPages, movie:movie}) The "arrayPages" variable is represented by an array: [ 1, 2, 3, ...

Angular's Conditional ng-if Error

Encountering an error link from Angular Js [1]http://errors.angularjs.org/1.2.10/$parse/lexerr?p0=Unterminated%20quote&p1=s%2013-14%20%5B'%5D&p2=recipe.ID%20!%3D%3D' I am struggling to implement the solution for this error. Any help wou ...

Adding numbers in JSP

Is there a way to trigger a popup alert message when the user inputs a correct or incorrect value and clicks on the "Go" button? I'm unsure of how to link the "Go" button with the Java code. Please assist me. <%@ page import="java.io.*,java.util. ...

One interesting characteristic of Javascript localStorage is that it overrides existing data instead of adding to it

I've been experimenting with localStorage to create new divs dynamically. Everything is going well, but I encountered an issue after reloading the page and clicking the bag button again. The previously created divs are being replaced by the new ones i ...

Get rid of the background shade in the area separating the menu items within a CSS menu

Is there a way to add some spacing between the menu items without affecting the background color applied to the anchor tags? I currently use a right margin of 13px for the spacing, but it also applies the background color, which is not the desired outcome ...

Placing the date of each blog post at the end of the excerpt

Currently, there is a grid section on the homepage of our site showcasing the two most recent blog posts. I am looking for a Javascript solution to relocate the date to the bottom of each block, outside of the border. For reference, you can visit the follo ...

Utilize flex to position content at the bottom

My layout features a fixed header and footer, positioned at the top and bottom respectively. The content section in between fills the remaining space, with a scrollbar available if the content extends beyond the area. <div id="app"> <d ...

Dealing with Error 462 in Excel VBA When Using Internet Explorer

This function is designed to loop through the hrefs obtained from the GetData() function, navigate each page, retrieve specific data, and then move on to the next one. Sub CreateDatabase() Dim ieNewPage As InternetExplorer, TableRows As Object, TableR ...

Switch the background color when a radio button is chosen

For my quiz on test practice with an array of questions, each question includes five radio buttons, but only one is correct. Initially, all five options have a gray background. Upon selecting a wrong option, it changes to red. If another incorrect option i ...

What is the best way to pass a cookie across multiple subdomains?

I am currently facing an issue with my setup where my express backend is hosted on , and the front-end is hosted on . The problem arises after logging in the frontend, as the auth server sets a cookie with "example.com" as the domain attribute, but the bro ...

Display the title tag when hovering over an image

Hey there! I'm looking to display the title tag of an image directly inside the image itself. Here's an example to illustrate what I mean: http://jsfiddle.net/51csqs0b/ .image { position:relative; width:200px; height:200px; } .ima ...

The search bar extends beyond the dropdown in a boostrap collapse scenario

Currently, I'm facing two issues that I need assistance with: On smaller screens, the search bar drops out of the navbar collapse inexplicably, and I'm struggling to identify the cause. The width of the search bar seems to be overriden by A ...

What steps should I take to prevent my <mat-card> from expanding whenever messages are shown in Angular 9?

I have a <mat-card> containing a login form on my page. However, when error messages are displayed, the vertical size of the <mat-card> changes and I need it to remain the same. Is there a way to prevent this from happening? Below, you will ...

Displaying an additional section using hover effects in Bootstrap

I recently utilized Bootstrap to create pricing tables which can be viewed here: http://www.bootply.com/VyHsJBDoNc Is there a way for me to implement hover functionality on a span element (+ More Information!) that will display additional information as s ...

Is there a way to choose columns 2 to 6 of the row that is currently selected

I am looking to create a hover effect for columns 1 through 7 of a row where, when the user hovers over any column within that range, certain styles are applied to all columns in the row except for columns 1 and 7. This means that the background color shou ...

Problem encountered while initializing a new project using Angular-CLI version 6.1.2

After attempting to create a new Angular project using ng new angular-6-boilerplate, I encountered an issue with the latest version of angular-cli. Despite using the terminal for Windows to set up my project, an error occurred: The input for the schemat ...

Error code received from OpenStack Identity API GET response

I am an intern student and I have a query. Currently, I am working on bug fixing for an Openstack cloud, JavaScript, and Node.js web application. My task involves resolving toastr.error messages and translating them into different languages. How do I ret ...