    /**
     * @class Ext.LoadMask
     */

    /**
     * @var {color} $loading-spinner-color
     * Background-color for the bars in the loading spinner.
     */
    $loading-spinner-color: #aaa !default;

    // Private
    $loading-spinner-size: 1em;
    $loading-spinner-bar-width: .1em;
    $loading-spinner-bar-height: .25em;

    /**
     * Includes default loading spinner styles (for dataviews).
     */
    @mixin sencha-loading-spinner {
      .x-loading-spinner {
        font-size: 250%;
        height: $loading-spinner-size;
        width: $loading-spinner-size;
        position: relative;

        -webkit-transform-origin: $loading-spinner-size/2 $loading-spinner-size/2;

        /* Shared Properties for all the bars */
        & > span, & > span:before, & > span:after {
          display: block;
          position: absolute;
          width: $loading-spinner-bar-width;
          height: $loading-spinner-bar-height;
          top: 0;
          -webkit-transform-origin: $loading-spinner-bar-width/2 $loading-spinner-size/2;
          @if $include-border-radius { @include border-radius($loading-spinner-bar-width/2); }
          content: " ";
        }

        & > span {
          &.x-loading-top           {  background-color: rgba($loading-spinner-color,0.99); }
          &.x-loading-top::after    {  background-color: rgba($loading-spinner-color,0.90); }
          &.x-loading-left::before  {  background-color: rgba($loading-spinner-color,0.80); }
          &.x-loading-left          {  background-color: rgba($loading-spinner-color,0.70); }
          &.x-loading-left::after   {  background-color: rgba($loading-spinner-color,0.60); }
          &.x-loading-bottom::before{  background-color: rgba($loading-spinner-color,0.50); }
          &.x-loading-bottom        {  background-color: rgba($loading-spinner-color,0.40); }
          &.x-loading-bottom::after {  background-color: rgba($loading-spinner-color,0.35); }
          &.x-loading-right::before {  background-color: rgba($loading-spinner-color,0.30); }
          &.x-loading-right         {  background-color: rgba($loading-spinner-color,0.25); }
          &.x-loading-right::after  {  background-color: rgba($loading-spinner-color,0.20); }
          &.x-loading-top::before   {  background-color: rgba($loading-spinner-color,0.15); }
        }
      }

      .x-loading-spinner > span {
        left:         50%;
        margin-left:  -0.05em;
      }

      // .x-loading-spinner > span::before, .x-loading-spinner > span::after{  content: " "; }

      /* Rotate each of the 4 Spans */

      .x-loading-spinner > span.x-loading-top{    -webkit-transform: rotate(0deg);    -moz-transform: rotate(0deg);   }
      .x-loading-spinner > span.x-loading-right{  -webkit-transform: rotate(90deg);   -moz-transform: rotate(90deg);  }
      .x-loading-spinner > span.x-loading-bottom{ -webkit-transform: rotate(180deg);  -moz-transform: rotate(180deg); }
      .x-loading-spinner > span.x-loading-left{   -webkit-transform: rotate(270deg);  -moz-transform: rotate(270deg); }

      /* These are the two lines that surround each of the 4 Span lines */

      .x-loading-spinner > span::before{-webkit-transform: rotate(30deg);   -moz-transform: rotate(30deg);  }
      .x-loading-spinner > span::after{ -webkit-transform: rotate(-30deg);  -moz-transform: rotate(-30deg); }

      /* Set Animation */

      .x-loading-spinner {
        -webkit-animation-name: x-loading-spinner-rotate;
        -webkit-animation-duration: .5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
      }

      @-webkit-keyframes x-loading-spinner-rotate{
        0%{     -webkit-transform: rotate(0deg);   }
        8.32%{  -webkit-transform: rotate(0deg);   }

        8.33%{  -webkit-transform: rotate(30deg);  }
        16.65%{ -webkit-transform: rotate(30deg);  }

        16.66%{ -webkit-transform: rotate(60deg);  }
        24.99%{ -webkit-transform: rotate(60deg);  }

        25%{    -webkit-transform: rotate(90deg);  }
        33.32%{ -webkit-transform: rotate(90deg);  }

        33.33%{ -webkit-transform: rotate(120deg); }
        41.65%{ -webkit-transform: rotate(120deg); }

        41.66%{ -webkit-transform: rotate(150deg); }
        49.99%{ -webkit-transform: rotate(150deg); }

        50%{    -webkit-transform: rotate(180deg); }
        58.32%{ -webkit-transform: rotate(180deg); }

        58.33%{ -webkit-transform: rotate(210deg); }
        66.65%{ -webkit-transform: rotate(210deg); }

        66.66%{ -webkit-transform: rotate(240deg); }
        74.99%{ -webkit-transform: rotate(240deg); }

        75%{    -webkit-transform: rotate(270deg); }
        83.32%{ -webkit-transform: rotate(270deg); }

        83.33%{ -webkit-transform: rotate(300deg); }
        91.65%{ -webkit-transform: rotate(300deg); }

        91.66%{ -webkit-transform: rotate(330deg); }
        100%{   -webkit-transform: rotate(330deg); }
      }
    }