สอบถามเกี่ยวกับวิธีเขียน loading ของ isotope filter หน่อยครับ

body {
  font-family: sans-serif;
}

.item {
  width: 80px;
  height: 80px;
  padding: 5px;
  margin: 5px;
  color: white;
  float: left;
}

p {
  margin: 0;
}

#filter-display {
  font-size: 18px;
  padding: 0.5em;
  border: 1px solid #CCC;
  color: blue;
}

.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; color: black; }

<h1>Isotope combination filters with checkboxes</h1>

<div id="options">
  <div class="option-set" data-group="brand">
    <input type="checkbox" value=""        id="brand-all" class="all" checked /><label for="brand-all">all brands</label>
    <input type="checkbox" value=".brand1" id="brand1" /><label for="brand1">brand1</label>
    <input type="checkbox" value=".brand2" id="brand2" /><label for="brand2">brand2</label>
    <input type="checkbox" value=".brand3" id="brand3" /><label for="brand3">brand3</label>
    <input type="checkbox" value=".brand4" id="brand4" /><label for="brand4">brand4</label>
  </div>
  <div class="option-set" data-group="type">
    <input type="checkbox" value=""        id="type-all" class="all" checked /><label for="type-all">all types</label>
    <input type="checkbox" value=".type1" id="type1" /><label for="type1">type1</label>
    <input type="checkbox" value=".type2" id="type2" /><label for="type2">type2</label>
    <input type="checkbox" value=".type3" id="type3" /><label for="type3">type3</label>
    <input type="checkbox" value=".type4" id="type4" /><label for="type4">type4</label>
  </div>
  <div class="option-set" data-group="color">
    <input type="checkbox" value=""        id="color-all" class="all" checked /><label for="color-all">all colors</label>
    <input type="checkbox" value=".red" id="red" /><label for="red">red</label>
    <input type="checkbox" value=".blue" id="blue" /><label for="blue">blue</label>
    <input type="checkbox" value=".green" id="green" /><label for="green">green</label>
    <input type="checkbox" value=".yellow" id="yellow" /><label for="yellow">yellow</label>
  </div>
  <div class="option-set" data-group="size">
    <input type="checkbox" value=""        id="size-all" class="all" checked /><label for="size-all">all sizes</label>
    <input type="checkbox" value=".uk-size8" id="uk-size8" /><label for="uk-size8">uk-size8</label>
    <input type="checkbox" value=".uk-size9" id="uk-size9" /><label for="uk-size9">uk-size9</label>
    <input type="checkbox" value=".uk-size10" id="uk-size10" /><label for="uk-size10">uk-size10</label>
    <input type="checkbox" value=".uk-size11" id="uk-size11" /><label for="uk-size11">uk-size11</label>
  </div>
</div>

<p id="filter-display"></p>

<div id="container"></div>

/*jshint browser:true, undef: true, unused: true, jquery: true */

var $container;
var filters = {};

$(function(){

  $container = $('#container');

  createContent();

  var $filterDisplay = $('#filter-display');

  $container.isotope();
  // do stuff when checkbox change
  $('#options').on( 'change', function( jQEvent ) {
    var $checkbox = $( jQEvent.target );
    manageCheckbox( $checkbox );

    var comboFilter = getComboFilter( filters );

    $container.isotope({ filter: comboFilter });

    $filterDisplay.text( comboFilter );
  });

});


var data = {
  brands: 'brand1 brand2 brand3 brand4'.split(' '),
  productTypes: 'type1 type2 type3 type4'.split(' '),
  colors: 'red blue yellow green'.split(' '),
  sizes: 'uk-size8 uk-size9 uk-size10 uk-size11'.split(' ')
};

function createContent() {
  var brand, productType, color, size;
  var items = '';
  // dynamically create content
  for (var i=0, len1 = data.brands.length; i < len1; i++) {
    brand = data.brands[i];
    for (var j=0, len2 = data.productTypes.length; j < len2; j++) {
      productType = data.productTypes[j];
        for (var l=0, len3 = data.colors.length; l < len3; l++) {
        color = data.colors[l];
        for (var k=0, len4 = data.sizes.length; k < len4; k++) {
          size = data.sizes[k];
          var itemHtml = '<div class="item ' + brand + ' ' +
            productType + ' ' + color + ' ' + size + '">' +
            '<p>' + brand + '</p>' +
            '<p>' + productType + '</p>' +
            '<p>' + size + '</p>' +
            '</div>';
            items += itemHtml;
        }
      }
    }
  }

  $container.append( items );
}


function getComboFilter( filters ) {
  var i = 0;
  var comboFilters = [];
  var message = [];

  for ( var prop in filters ) {
    message.push( filters[ prop ].join(' ') );
    var filterGroup = filters[ prop ];
    // skip to next filter group if it doesn't have any values
    if ( !filterGroup.length ) {
      continue;
    }
    if ( i === 0 ) {
      // copy to new array
      comboFilters = filterGroup.slice(0);
    } else {
      var filterSelectors = [];
      // copy to fresh array
      var groupCombo = comboFilters.slice(0); // [ A, B ]
      // merge filter Groups
      for (var k=0, len3 = filterGroup.length; k < len3; k++) {
        for (var j=0, len2 = groupCombo.length; j < len2; j++) {
          filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ]
        }

      }
      // apply filter selectors to combo filters for next group
      comboFilters = filterSelectors;
    }
    i++;
  }

  var comboFilter = comboFilters.join(', ');
  return comboFilter;
}

function manageCheckbox( $checkbox ) {
  var checkbox = $checkbox[0];

  var group = $checkbox.parents('.option-set').attr('data-group');
  // create array for filter group, if not there yet
  var filterGroup = filters[ group ];
  if ( !filterGroup ) {
    filterGroup = filters[ group ] = [];
  }

  var isAll = $checkbox.hasClass('all');
  // reset filter group if the all box was checked
  if ( isAll ) {
    delete filters[ group ];
    if ( !checkbox.checked ) {
      checkbox.checked = 'checked';
    }
  }
  // index of
  var index = $.inArray( checkbox.value, filterGroup );

  if ( checkbox.checked ) {
    var selector = isAll ? 'input' : 'input.all';
    $checkbox.siblings( selector ).removeAttr('checked');


    if ( !isAll && index === -1 ) {
      // add filter to group
      filters[ group ].push( checkbox.value );
    }

  } else if ( !isAll ) {
    // remove filter from group
    filters[ group ].splice( index, 1 );
    // if unchecked the last box, check the all
    if ( !$checkbox.siblings('[checked]').length ) {
      $checkbox.siblings('input.all').attr('checked', 'checked');
    }
  }

}