Mike Cave Mike Cave - 15 days ago 8
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?

Answer

jQuery

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:

$("#spinner1").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:

// NOT JQUERY
$("spinner1").style.display = "none";

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