/* angular-promise-buttons */ @-webkit-keyframes three-quarters { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes three-quarters { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes three-quarters { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes three-quarters { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .btn-spinner { font-family: sans-serif; font-weight: 100; } .btn-spinner:not(:required) { -webkit-animation: three-quarters 1250ms infinite linear; -moz-animation: three-quarters 1250ms infinite linear; -ms-animation: three-quarters 1250ms infinite linear; -o-animation: three-quarters 1250ms infinite linear; animation: three-quarters 1250ms infinite linear; border: 3px solid #8c8c8c; border-right-color: transparent; border-radius: 100%; box-sizing: border-box; display: inline-block; position: relative; vertical-align: middle; overflow: hidden; text-indent: -9999px; width: 18px; height: 18px; } .btn-primary .btn-spinner:not(:required), .btn-danger .btn-spinner:not(:required) { border: 3px solid #efefef; border-right-color: transparent; } .btn-spinner:not(:required) { margin-left: -22px; opacity: 0; transition: 0.4s margin ease-out, 0.2s opacity ease-out; } .is-loading .btn-spinner { transition: 0.2s margin ease-in, 0.4s opacity ease-in; margin-left: 5px; opacity: 1; } .btn[promise-btn] { text-align: left; }