angular-promise-buttons.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. /* angular-promise-buttons */
  2. @-webkit-keyframes three-quarters {
  3. 0% {
  4. -webkit-transform: rotate(0deg);
  5. -moz-transform: rotate(0deg);
  6. -ms-transform: rotate(0deg);
  7. -o-transform: rotate(0deg);
  8. transform: rotate(0deg);
  9. }
  10. 100% {
  11. -webkit-transform: rotate(360deg);
  12. -moz-transform: rotate(360deg);
  13. -ms-transform: rotate(360deg);
  14. -o-transform: rotate(360deg);
  15. transform: rotate(360deg);
  16. }
  17. }
  18. @-moz-keyframes three-quarters {
  19. 0% {
  20. -webkit-transform: rotate(0deg);
  21. -moz-transform: rotate(0deg);
  22. -ms-transform: rotate(0deg);
  23. -o-transform: rotate(0deg);
  24. transform: rotate(0deg);
  25. }
  26. 100% {
  27. -webkit-transform: rotate(360deg);
  28. -moz-transform: rotate(360deg);
  29. -ms-transform: rotate(360deg);
  30. -o-transform: rotate(360deg);
  31. transform: rotate(360deg);
  32. }
  33. }
  34. @-o-keyframes three-quarters {
  35. 0% {
  36. -webkit-transform: rotate(0deg);
  37. -moz-transform: rotate(0deg);
  38. -ms-transform: rotate(0deg);
  39. -o-transform: rotate(0deg);
  40. transform: rotate(0deg);
  41. }
  42. 100% {
  43. -webkit-transform: rotate(360deg);
  44. -moz-transform: rotate(360deg);
  45. -ms-transform: rotate(360deg);
  46. -o-transform: rotate(360deg);
  47. transform: rotate(360deg);
  48. }
  49. }
  50. @keyframes three-quarters {
  51. 0% {
  52. -webkit-transform: rotate(0deg);
  53. -moz-transform: rotate(0deg);
  54. -ms-transform: rotate(0deg);
  55. -o-transform: rotate(0deg);
  56. transform: rotate(0deg);
  57. }
  58. 100% {
  59. -webkit-transform: rotate(360deg);
  60. -moz-transform: rotate(360deg);
  61. -ms-transform: rotate(360deg);
  62. -o-transform: rotate(360deg);
  63. transform: rotate(360deg);
  64. }
  65. }
  66. .btn-spinner {
  67. font-family: sans-serif;
  68. font-weight: 100;
  69. }
  70. .btn-spinner:not(:required) {
  71. -webkit-animation: three-quarters 1250ms infinite linear;
  72. -moz-animation: three-quarters 1250ms infinite linear;
  73. -ms-animation: three-quarters 1250ms infinite linear;
  74. -o-animation: three-quarters 1250ms infinite linear;
  75. animation: three-quarters 1250ms infinite linear;
  76. border: 3px solid #8c8c8c;
  77. border-right-color: transparent;
  78. border-radius: 100%;
  79. box-sizing: border-box;
  80. display: inline-block;
  81. position: relative;
  82. vertical-align: middle;
  83. overflow: hidden;
  84. text-indent: -9999px;
  85. width: 18px;
  86. height: 18px;
  87. }
  88. .btn-primary .btn-spinner:not(:required), .btn-danger .btn-spinner:not(:required) {
  89. border: 3px solid #efefef;
  90. border-right-color: transparent;
  91. }
  92. .btn-spinner:not(:required) {
  93. margin-left: -17px;
  94. opacity: 0;
  95. transition: 0.4s margin ease-out, 0.2s opacity ease-out;
  96. }
  97. .is-loading .btn-spinner {
  98. transition: 0.2s margin ease-in, 0.4s opacity ease-in;
  99. margin-left: 5px;
  100. opacity: 1;
  101. }