/** * @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); } } }