Loader Icon with KNockout

by Rayudu Ikkurthi

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
     <h1>Persons</h1>

    <hr />
    <table data-bind="loadingList:$root.InProgress()">                
        <thead>
            
            <tr>
                <th><span>Name</span>

                </th>
                <th><span>Country</span>

                </th>
            </tr>
        </thead>
        <tbody>
             <!-- ko  foreach:persons -->
            <tr>
                <td><span data-bind="text:Name"></span>

                </td>
                <td><span data-bind="text:Country"></span>

                </td>
            </tr>
         <!-- /ko -->
        </tbody>
    </table>
       
</div>

CSS

.loading {
    display: table;
    position: relative;
}
.bar {
    position: absolute;
    background: #29d;
    z-index: 1031;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    width: 225px;
height: 8px;
background-repeat: no-repeat;
background-image:...

JavaScript

ko.bindingHandlers.loadingList = {

    init: function (element, valueAccessor) {
        ko.utils.unwrapObservable(valueAccessor());
     
        if (valueAccessor() == true) {
            $(element).wrap($('<div>', {
                "class": "loading"
            }));
            $(element).before($('<div>', {
                "class": "bar"
            }));
        } else {
            $(element).parent().parent().replaceWith($(element));
        }
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        ko.utils.unwrapObservable(valueAccessor());
       
        if (valueAccessor() == true) {
            $(element).wrap($('<div>', {
                "class": "loading"
            }));
            $(element).before($('<div>', {
                "class": "bar"
            }));
        } else {
           $(element).parent().parent().replaceWith($(element));
          
        }
    }
};


function PersonViewModel(callback) {
    var self = this;

    self.InProgress = ko.observable(true);
    self.persons = ko.observableArray([]);

    // Get available audits
    self.LoadPersons=function() {
        var promises = [];
        promises.push(GetPersons());

    $.when.apply($, promises).then(function () {
        self.persons(arguments[0]);
        self.InProgress(false);
    });
    }
}
var personViewModel=new PersonViewModel();
ko.applyBindings(personViewModel);
personViewModel.LoadPersons();


/* ----------------------------------------------------------
            Get Audits
   ----------------------------------------------------------*/

function GetPersons() {

    var dfrd = $.Deferred();

    var result = [{
        Name: 'John Smith',
        Country: 'USA'
    }, {
        Name: 'Juan Carlos',
        Country: 'Spain'
    }];

    setTimeout(function () {
        dfrd.resolve(result)
    }, 3000);

    return dfrd;
}