Use spinner while div loads into DOM

Question

Possible Duplicate:
How to show loading spinner in jQuery?

I have a div that has a lot of stuff in it, and doesn't load into the DOM smoothly. Is there a way I could add a spinner kind of like you see in AJAX calls? Here is my current code.

<h4>Network Printers</h4>
<div id="demo1" class="demo">
    <ul class="printer-tree">
        <li>Many List Items</li>
    </ul>
</div>
<div class="spinner" style="display:none;"></div>

$(function () {
    $("#demo1").jstree({ 
        "plugins" : [ "themes", "html_data", "checkbox", "sort", "ui" ]
    });
});

not a duplicate, that is for aJax. – ndesign11 Nov 23 '12 at 15:23 — ndesign11, Nov 23 '12 at 15:23

score 2 · Answer 1 · answered Nov 23 '12 at 15:25

according to the documentation, you can bind an event to the tree creation, like this:

$(function () {

    $("div.spinner").show();

    $("#demo1").bind("loaded.jstree", function (event, data) {
        // tree has been loaded
        $("div.spinner").hide();
    }).jstree(
        { 
            "plugins" : [ "themes", "html_data", "checkbox", "sort", "ui" ]
        }
    );

});

score 0 · Answer 2 · answered Nov 23 '12 at 15:17

0

I guess you can!

First, your syntax seem to be invalid. The opening tag of your div doesn't gets closed; You are missing a >.

You could enable the spinner on default, and disable it whenever the content is loaded using a callback. I'm don't know anything about jstree but according to it's documentation you can set a callback in some methods.

answered Nov 23 '12 at 15:17

Tim S.

12,449
7
41
68

I'm not seeing any missing ">" – ndesign11 Nov 23 '12 at 15:21
@MattCharlton it did before. I guess someone has edited it. – Tim S. Nov 26 '12 at 11:20

Use spinner while div loads into DOM

2 Answers2