114 lines
2.8 KiB
CSS
114 lines
2.8 KiB
CSS
|
/* 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;
|
||
|
}
|