Mike Cave Mike Cave - 4 months ago 34
HTML Question

How do I hide a Font Awesome spinner?

I have the following spinner on an MVC .net Razor page:

<div id="spinner1">Processing Video... <i class="fa fa-spinner fa-spin fa-2x fa-fw"></i></div>

It works fine. I have a Signal-R push to add data to the page (works fine). once the list of data is complete (works fine) I want to HIDE the sipnner.

I have tried:

$('#spinner1').display = 'none';

but nothing happens, the spinner still spins. How can I get rid of it?



Assuming from the code in the question that you're using jQuery, jQuery objects don't have a display property. Instead, you'd use hide:


...although you could use display directly, via the css function or by accessing the raw DOM element from within the jQuery wrapper:

$("#spinner1").css("display", "none");      // Using `css`
$("#spinner1")[0].style.display = "none";   // Accessing raw DOM element

Not jQuery

Given that you've included the # in the $("#spinner1"), I think it's really unlikely, but: If you're using MooTools or PrototypeJS or something else that has a $ function but returns a raw DOM element, the display property is on style:

$("spinner1").style.display = "none";

Note in those two cases, you don't include the # with $() (although you would with $$()).