Single Page App - IsLoading snippet

spa-isLoading.js

// Create the model and the viewModel
var model = [];
var viewModel = {
    products: ko.observableArray(model)
};

// When the page is ready, set up the loading indicator
// and load the data
$(document).ready(function () {

    // Set the myProducts element to receive the loading indicator
    $("#myProducts").isLoading({
        text: "Loading",
        position: "inside",
    });

    // Load the data into the model
    $.getJSON(
        "/api/products/",
        function (model) {
            // Do something that take a couple seconds so we can
            // see the spinner
            var a = 0;
            setTimeout(function () {
                var b = a * 5000;
            }, 2000);

            // Hide the loading indicator
            $("#myProducts").isLoading("hide");

            // Bind the data to the viewModel
            viewModel.products(model);
        }
    );

    // Apply the Knockout bindings
    ko.applyBindings(viewModel);
});