/* Global loading spinner Styles that drive our global loading spinner component Markup:
Name: globalLoaderSpinner Styleguide 2.21 */ @global-loading-spinner-size: 50px; @global-loading-spinner-top-offset: 60px; @global-loading-spinner-body-size: 192px; @global-loading-spinner-text-color: @theme-grey12; .global-loading-spinner__mask-contents { opacity: 1; transition: opacity 0.3s ease; // that is, hide this element when it is within `spinner` class, which is applied to .show-global-loading-spinner & { transition-delay: .5s; } // that is, hide this element when it is within `angular-is-loading` class, which is applied to .angular-is-loading & { opacity: 0; pointer-events: none; } } .global-loading-spinner__body { position: absolute; z-index: 1; width: @global-loading-spinner-body-size; height: @global-loading-spinner-body-size; top: 0; left: 50%; margin-left: -@global-loading-spinner-body-size/2; border: 1px solid @color-border-page-content; border-radius: @border-radius-default; background-color: #FFFFFF; box-shadow: @full-page-content-box-shadow; opacity: 0; transform: translateY(-100%); transition: all .3s ease-in-out; // that is, show this element when it is within `angular-is-loading` class, which is applied to .angular-is-loading & { opacity: 1; transform: translateY(70px); } } .global-loading-spinner__text { margin-top: @global-loading-spinner-size + @global-loading-spinner-top-offset + 15px; text-align: center; color: @global-loading-spinner-text-color; } .global-loading-spinner__spinner { display: block; position: absolute; top: @global-loading-spinner-top-offset; left: 50%; height: @global-loading-spinner-size; width: @global-loading-spinner-size; background-image: url("@{icons}global-spinner.svg"); background-repeat: no-repeat; background-size: @global-loading-spinner-size; margin-left: -(@global-loading-spinner-size / 2); -webkit-animation: globalspin 1s linear infinite; -moz-animation: globalspin 1s linear infinite; animation: globalspin 1s linear infinite; } @-moz-keyframes globalspin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes globalspin { 100% { -webkit-transform: rotate(360deg); } } @keyframes globalspin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }