Issue with Angular 6 Animation not showing up

Looking to incorporate an animation spinner into my Angular app

Found this spinner example:

https://codepen.io/z-/pen/OPzNLz

spinner.component.html

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css'],
  animations: []
})
export class SpinnerComponent implements OnInit {

  constructor() {}

  ngOnInit() {}
}
/*Your CSS code here*/
<div>
  <!-- Your HTML code here -->
</div>

Successfully displayed the spinner by copying the HTML & CSS files into a plain html and css environment.

Decided to implement it as an angular component by transferring the code, but unfortunately the spinner did not appear - without any error messages.

Confirmed that BrowserAnimationsModule is imported in app.module.ts, however, it did not make a difference.

Answer №1

The problem arose from the presence of extraneous notes within the CSS code.

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

Creating formatted code blocks within my HTML document

I'm currently working on achieving this layout in my HTML: https://i.stack.imgur.com/2LEQO.png Here is the JSFiddle link: https://jsfiddle.net/cr9vkc7f/4/ I attempted to add a border to the left of my code snippet as shown below: border-left: 1px ...

Is your URL getting cut off in jQuery?

How can I properly display a URL in an HTML table without it getting truncated? I'm attempting to show it within a table using jQuery, but it seems to be cutting off the URL. Here's a snippet of my code. Any suggestions on how to fix this? <! ...

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

Navigate to a particular row in jsgrid

I've implemented JS Grid for rendering data in a grid view from . The grid I'm using has multiple pages. I need to navigate to the page that includes the newly inserted row and highlight it after insertion. Is there an option in jsgrid that allo ...

registering a back button action in Ionic2 for multiple pages

Currently, I am in the process of developing my Ionic2 app and have encountered a dilemma regarding the functionality of registerBackButtonAction. On one page, let's call it pageA, I have implemented this function and everything is functioning as exp ...

What is causing Ajax to fail in connecting to the server?

When trying to submit a simple ajax form and send a response to my server, I keep getting the following error message : Forbidden (CSRF token missing or incorrect.): /designer/addOne/ [31/Jul/2017 12:49:12] "POST /designer/addOne/ HTTP/1.1" 403 2502 Alt ...

Can metadata be attached to data models in Angular for annotation purposes?

Looking to add some metadata annotations to a simple data model export class Certification { title: string; certificationType?: CertificationType; validTo?: number; description?: string; externalIdentifier: Guid; constructor() { ...

Unable to choose an input form within a CSS div

Just installed a jQuery responsive menu tab but encountering issues with selecting forms to input values. It seems like a CSS problem that I cannot identify. Please assist me in resolving this issue. Below is the HTML code snippet: <div class="contai ...

The Mantine date picker is causing an error stating that objects are not valid as a React child

I'm currently experimenting with utilizing Mantine Date in NextJS. The goal is to have the selected date displayed in the HTML text heading when a user clicks on it. For instance, if a user selects January 1st, 2023, the text should show like this: Da ...

When using *ngFor with AngularFireList, an error is thrown indicating an invalid

I'm struggling to grasp why I'm getting an invalid pipe argument error with *ngFor when using async. Without async, I'm told that NgFor only supports binding to iterables like Arrays. Oddly enough, the same code works fine on another page bu ...

Unusual default Nav bar positioning

When attempting to create a navbar, I encountered small gaps that seemed impossible to close. Adjusting margins only resulted in new gaps appearing on the opposite side. Even when trying to find a compromise, I ended up with gaps on both sides instead. It ...

Semantic HTML and unambiguous: both

We are making an effort to enhance the semantics of our HTML, and one element that stands out in our code related to presentation is <div class="clear"></div> For instance, if we consider the following semantic HTML structure: <div class= ...

Arranging Angular Array-like Objects

I am in possession of an item: { "200737212": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "nice ...

Is there a way to set the content to be hidden by default in Jquery?

Can anyone advise on how to modify the provided code snippet, sourced from (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show), so that the element remains hidden by default? <!DOCTYPE html> <html> <head> <scrip ...

The presence of double quotes in stringified JSON is undesired

I am currently working on a weather forecasting website where the API returns pure JSON data. However, when I convert this data to a string and add it to an element in order to display it on the webpage, I encounter a problem with double quotes appearing. ...

Tips for bringing a particular tab into focus when a page initially loads

My webpage features custom links (tabs) that display content when clicked. By default, the first tab is selected and its content is shown, while the rest are set to display:none. Clicking on any other link will assign the 'selected' class to it, ...

Adjusting the height of a card in Reactstrap

I am currently exploring Reactstrap and aiming to ensure a specific Card adjusts according to the size of the window by setting its aspect ratio using percentages rather than pixels. Interestingly, while adjusting the width works as desired, I'm faci ...

Why is PHP unable to identify the custom-designed CSS button upon submission?

I'm having a design issue where the button on my form is not being detected. I've tried various methods like changing the class name, assigning it a name via HTML, but nothing seems to work. Here is my button: .blue_button { background: #005b66; ...

Any ideas on how to fix the error that pops up during the installation of the bootstrap package in Node

The npm command is not recognized as a valid cmdlet, function, script file, or operable program. Please double check the spelling of the command and ensure that the path is correct before trying again. This error occurred at line 1. npm i bootstrap + ...

Angular8 does not recognize custom paths that have been added to the tsConfig file

Hey there! I'm facing an issue with Angular not recognizing a custom path I added to my tsConfig file. It seems like Angular already has a baseUrl property set to ./, starting from the current folder where the tsConfig file is located. The code snippe ...