Angular's NGX Spinner is efficiently blocking the entire page

I'm currently incorporating ngx-spinner into my Angular application, but I'm running into an issue where it's loading on the entire page instead of just a specific area. Below is the code that I'm using:

<p> Hello name </p>
<div class="content" style="margin-top: 55px;">
    <div style="position: relative">
      <ngx-spinner bdColor = "rgba(0, 0, 0, 0.8)" size = "medium" color = "#fff" type = "square-jelly-box" [fullScreen] = "true"><p style="color: white" > Loading... </p></ngx-spinner>
    </div>
    <cui-modal></cui-modal>
    <router-outlet></router-outlet>
  </div>

The problem here is that I want the spinner to only load inside the 

<div class="content" style="margin-top: 55px;"></div>
, so that only the contents within this div will be blocked. Unfortunately, it's currently blocking the entire screen. Can anyone help me find a solution to this issue?

cssangularngx-spinner

Answer №1

Upon reviewing your instructions, I have created a stackblitz demo but it seems that the issue may lie with the input.

I have come across the configuration in the documentation. https://github.com/Napster2210/ngx-spinner Simply toggling the fullScreen to false can prevent the spinner from covering the entire page.

Fullscreen Mode(Enable/Disable)

Below is a snippet of my template code.

    <ngx-spinner
          bdColor="rgba(0, 0, 0, 0.8)"
          size="medium"
          color="#fff"
          type="square-jelly-box"
          [fullScreen]="false"
          ><p style="color: white">Loading...</p>
    </ngx-spinner>

For reference, here is an example: https://stackblitz.com/edit/angular-wbcrve?file=src/app/app.component.html

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 CSS file was not applied because the mime type did not match (Error code: SEC711

I am currently working on a JSP-Servlet application. I have successfully deployed the application using Eclipse with the default Tomcat 7 server. However, upon deployment, I noticed that the UI renders properly in Chrome and Firefox but encounters issues ...

htmlcssinternet-explorertomcatmime-types

Implementing communication between Resolvers and component methods in Angular 2+

When it comes to loading data from the backend before components are rendered, Angular suggests implementing a Resolver. Instead of creating a Resolver for each component, I am exploring a different approach where the components store the information about ...

angular

Struggling to determine the expense upon button activation - data remains stagnant

My coding project involves a basic ordering system where users can input an integer, click on an update button, and see the total cost displayed below. Despite my efforts, I've encountered issues with two different methods: Using plain JavaScript for ...

javascripthtmlcss

You cannot set parameters using Angular's httpHeaders post method

Seeking assistance in obtaining the authtoken from RestAPI using a specific method. While the same URL, Parameters, and Headers provide the correct response in Postman, I am encountering a 401 unauthorized error in Angular. Can someone help me identify whe ...

angularhttp-headershttpclientangular-httpclient

Adjust the appearance of a div according to the input value

When a user inputs the correct value (a number) into an input of type "number," I want a button to appear. I attempted var check=document.getElementById("buttonID").value == "1" followed by an if statement, but it seems I made a mistake somewhere. Here&ap ...

javascripthtmlcssbuttoninput

retrieve document data from firestore using the service

Is there a way to get real-time data from a Firestore document using a service? According to Firebase's documentation, you can achieve this by following this link: https://firebase.google.com/docs/firestore/query-data/listen?hl=es#web-modular-api I ...

angulartypescriptfirebasegoogle-cloud-firestoreasync-await

Reposition icons to the center within the icon-div container

I am trying to center align the elements in my icon-div as shown in the wireframe image. What steps should I take to achieve this layout? HTML: <div class="icons_div"> <div class="row bg-secondary"> <div class="col-sm-2"> ...

htmlcssfrontendbootstrap-4web-frontend

Choose the selectize item to always move to the front

Hey there, I'm currently using the selectize plugin to incorporate tags into my website. Everything is working well, except for the issue of the drop-down item being obscured by some of my other divs. I'm looking to have them function more like ...

jqueryhtmlcssselectize.js

Display Button and Div when Event occurs in Asp.net core using Razor Pages

I am currently working on a project that involves two dropdown menus: one for Categories and the other for SubCategories. Within a partial view named _CreateProject, I have set up an html form to facilitate the creation of new projects. My goal is to have ...

jqueryhtmlcsstwitter-bootstraprazor-pages

Achieving vertical alignment for Bootstrap inputs on mobile devices and horizontal alignment on desktop screens

The code below showcases my current setup: <form> <div class="row"> <div class="col-md-8"> <label class="sr-only" for="first-name">First name</label> <input type="text" class="form-contr ...

htmlcssbootstrap-4

Is it feasible to implement the Bootstrap GRID System?

Hello there! I am currently exploring a potential scenario. When viewing on a desktop or laptop, the layout should look like this: <div class="col-md-3"> sidebar </div> <div class="col-md-9"> article </div> On a smaller screen, ...

htmlcsstwitter-bootstrap

Are there any modules in Angular 8 that are used across various projects?

I am facing a challenge with managing two projects that share the same core functionality. These projects have identical layouts and pages, but certain components and modules are specific to each project. Currently, I maintain two separate Angular projects ...

javascriptangularmoduleangular7

What is the best method to assign a CSS class to specific nodes within a TreeView using CodeBehind?

I need to apply unique styling to certain nodes in the codebehind. Within my TreeView, parents have two categories of children. One category matches the parent type (e.g. organizationalUnit), while the other does not (e.g. organizationalMembers). I aim t ...

c#asp.netcsstreeview

Angular fails to display newly created objects unless the page is manually refreshed

Hey there, I'm facing a problem with my message service on the user profile page. Even though messages are fetched from the database and displayed correctly, any changes (such as creating or deleting a message) are not reflected until I manually refre ...

node.jsmongodbangularexpressmean-stack

Angular reactive forms - validate on both change and blur events with real-time feedback

In my application, I am utilizing angular reactive forms to handle validations. The specific requirement I have is that certain validations should be triggered on change, which is the default behavior of angular form validation, while others should only oc ...

angularvalidation

Enhance the appearance of the CKEditor by applying CSS styling to both the Preview

Can I apply CSS to customize the appearance of both the Editor text and the Preview? The CMS uses separate CSS files for the backend compared to the frontend of the website, and I would like the editor to mimic how the content will appear on the site. Fo ...

cssclassckeditorcustomization

Creating a FadeIn animation for a hidden div element by using the display:none property

Struggling to implement a fadeIn function for a div tag with a display:none property. How can I make the div tag visible and smoothly fade in while still keeping the display:none property? Attempted solution so far: <div class="graphs_line_based cle ...

javascriptjqueryhtmlcss

The webpage on IE 9 is not aligning in the center

Everything seems to be working well in Chrome and IE 9 compatibility mode, but not in the actual IE 9 mode. The goal is to have the page centered. Check out the site here Any ideas on what could be causing this issue? ...

htmlcssinternet-explorer-9

Utilizing various z-index values for multiple background images in a single CSS class

My approach may be completely off. I am in the process of building a website using sliced images from a .PSD file created by a graphic artist. Essentially, the background image consists of 4 green bars angled at 45 degrees slightly intertwined with 3 blue ...

htmlcssbackground-imagez-index

Open space on responsive website causing layout issue

I need help troubleshooting some code for a responsive website. When I shrink the screen and an item goes "under" another one instead of next to it, it creates a large gap that I want to avoid. Ideally, I would like the items to shrink up to a certain mini ...

htmlcss