title: Spin icon freezes while loading records
body: <p>I am trying to load records using breeze. While loading record i am showing spin icon. But somehow spin icon seems to stop while records are being loaded in grid.
  Here is my html </p>
  
  <pre><code>&lt;div id="showSpin" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top:248px;left: 320px;  background-color: #FFF; opacity: 0.9; filter: alpha(opacity=90);"&gt;
      &lt;img src="/images/spin.gif" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is my code to load image</p>
  
  <pre><code>isSpinning(true)
  context.getData(name, records).then(function (data) {
       isSpinning(false);
  
      setTimeout(function () {
          isSpinning(false);
      }, 300);
  
  })
  .fail("Record not found");
  </code></pre>
  
  <p><strong>Update1</strong>
  I tried below code as per answer but nothing happens. I also included css. But cant see anything.</p>
  
  <pre><code>&lt;div id="loading" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top:240px;left: 280px;  background-color: #FFF; opacity: 0.9; filter: alpha(opacity=90);"&gt;
      &lt;i class="icon-spin " style="width: 40px"&gt;&lt;/i&gt;
      &lt;!--&lt;img src="../../../../../Content/images/download.jpg" style="width: 40px" /&gt;--&gt;
  &lt;/div&gt; 
  </code></pre>