$spinner_size: 24px; @mixin spinner() { .esri-ui { .esri-spinner { display: none; position: absolute; top: -999em; left: -999em; transform-origin: 0 0; opacity: 0; z-index: 2; box-shadow: none; background-color: transparent; padding: 0; width: $spinner_size; height: $spinner_size; overflow: visible; pointer-events: none; } .esri-spinner::before { display: block; position: absolute; margin: -50% 0 0 -50%; background: url("../base/images/Loading_Indicator_double_32.svg") no-repeat center; width: 100%; height: 100%; animation: esri-spinner--rotate-animation 750ms linear infinite; content: ""; } .esri-spinner--start { display: block; animation: esri-spinner--start-animation 250ms cubic-bezier(0.17, 0.67, 0.36, 0.99) forwards; } .esri-spinner--finish { display: block; opacity: 1; animation: esri-spinner--finish-animation 125ms ease-in forwards; animation-delay: 75ms; } } } @keyframes esri-spinner--start-animation { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes esri-spinner--finish-animation { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } @keyframes esri-spinner--rotate-animation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @if $include_Spinner == true { @include spinner(); }