.slds-spinner_container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:9050;background-color:hsla(0,0%,100%,.75);visibility:visible;opacity:1;transition:opacity .2s ease,visibility 0;transition-delay:0s,.3s;display:none} | |
.slds-spinner{position:absolute;top:50%;left:50%;z-index:9051;transform:translate(-50%,-50%) rotate(90deg)} | |
.slds-spinner,.slds-spinner__dot-a,.slds-spinner__dot-b{transform-origin:50% 50%;will-change:transform} | |
.slds-spinner__dot-a,.slds-spinner__dot-b{position:absolute;top:0;left:0;width:100%} | |
.slds-spinner:after,.slds-spinner:before,.slds-spinner__dot-a:after,.slds-spinner__dot-a:before,.slds-spinner__dot-b:after,.slds-spinner__dot-b:before{content:"";position:absolute;background:#b0adab;border-radius:50%;animation-duration:1s;animation-iteration-count:infinite;transform:translateZ(0)} | |
.slds-spinner__dot-a{transform:rotate(60deg)} | |
.slds-spinner__dot-b{transform:rotate(120deg)} | |
.slds-spinner:before{animation-delay:-.083s} | |
.slds-spinner__dot-a:before{animation-delay:.083s} | |
.slds-spinner__dot-b:before{animation-delay:.25s} | |
.slds-spinner:after{animation-delay:.41666667s} | |
.slds-spinner__dot-a:after{animation-delay:.583s} | |
.slds-spinner__dot-b:after{animation-delay:.75s} | |
@keyframes dotsBounceBefore-medium { | |
0%{transform:translateZ(0)} | |
60%{transform:translateZ(0);animation-timing-function:cubic-bezier(.55,.085,.68,.53)} | |
80%{transform:translate3d(-.5rem,0,0);animation-timing-function:cubic-bezier(0,1.11,.7,1.43)} | |
to{transform:translateZ(0)} | |
} | |
@keyframes dotsBounceAfter-medium { | |
0%{transform:translateZ(0)} | |
60%{transform:translateZ(0);animation-timing-function:cubic-bezier(.55,.085,.68,.53)} | |
80%{transform:translate3d(.5rem,0,0);animation-timing-function:cubic-bezier(0,1.11,.7,1.43)} | |
to{transform:translateX(0)} | |
} | |
.slds-spinner--large,.slds-spinner_large{width:2.75rem} | |
.slds-spinner--large .slds-spinner__dot-a:after,.slds-spinner--large .slds-spinner__dot-a:before,.slds-spinner--large .slds-spinner__dot-b:after,.slds-spinner--large .slds-spinner__dot-b:before,.slds-spinner--large.slds-spinner:after,.slds-spinner--large.slds-spinner:before,.slds-spinner_large .slds-spinner__dot-a:after,.slds-spinner_large .slds-spinner__dot-a:before,.slds-spinner_large .slds-spinner__dot-b:after,.slds-spinner_large .slds-spinner__dot-b:before,.slds-spinner_large.slds-spinner:after,.slds-spinner_large.slds-spinner:before{width:.625rem;height:.625rem} | |
.slds-spinner--large .slds-spinner__dot-a:before,.slds-spinner--large .slds-spinner__dot-b:before,.slds-spinner--large.slds-spinner:before,.slds-spinner_large .slds-spinner__dot-a:before,.slds-spinner_large .slds-spinner__dot-b:before,.slds-spinner_large.slds-spinner:before{animation-name:dotsBounceBefore-medium;top:-.3125rem;left:-.3125rem} | |
.slds-spinner--large .slds-spinner__dot-a:after,.slds-spinner--large .slds-spinner__dot-b:after,.slds-spinner--large.slds-spinner:after,.slds-spinner_large .slds-spinner__dot-a:after,.slds-spinner_large .slds-spinner__dot-b:after,.slds-spinner_large.slds-spinner:after{animation-name:dotsBounceAfter-medium;top:-.3125rem;right:-.3125rem} | |
@keyframes dotsBounceBefore-large { | |
0%{transform:translateZ(0)} | |
60%{transform:translateZ(0);animation-timing-function:cubic-bezier(.55,.085,.68,.53)} | |
80%{transform:translate3d(-.75rem,0,0);animation-timing-function:cubic-bezier(0,1.11,.7,1.43)} | |
to{transform:translateX(0)} | |
} | |
@keyframes dotsBounceAfter-large { | |
0%{transform:translateZ(0)} | |
60%{transform:translateZ(0);animation-timing-function:cubic-bezier(.55,.085,.68,.53)} | |
80%{transform:translate3d(.75rem,0,0);animation-timing-function:cubic-bezier(0,1.11,.7,1.43)} | |
to{transform:translateX(0)} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment