CODEWITHSUNDEEP
javascriptjqueryhtmlfont-awesome
Mike Cave
Mike Cave

Reputation: 147

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?

Upvotes: 0

Views: 3200

Answers (2)

Tchopane
Tchopane

Reputation: 174

I'm using this code:

<i id="spin" class="fa fa-circle-o-notch fa-spin"></i>

and in js:

$("#spin").hide();

It works fine for me.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075239

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 $$()).

Upvotes: 3

Related Questions