progressCircular.css 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. md-progress-circular {
  8. display: block;
  9. position: relative;
  10. width: 100px;
  11. height: 100px;
  12. padding-top: 0 !important;
  13. margin-bottom: 0 !important;
  14. -webkit-transform: scale(0.5);
  15. transform: scale(0.5); }
  16. md-progress-circular .md-spinner-wrapper {
  17. display: block;
  18. position: relative;
  19. overflow: hidden; }
  20. md-progress-circular .md-spinner-wrapper .md-inner {
  21. width: 100px;
  22. height: 100px;
  23. position: relative; }
  24. md-progress-circular .md-spinner-wrapper .md-inner .md-gap {
  25. position: absolute;
  26. left: 49px;
  27. right: 49px;
  28. top: 0;
  29. bottom: 0;
  30. border-top-width: 10px;
  31. border-top-style: solid;
  32. box-sizing: border-box; }
  33. md-progress-circular .md-spinner-wrapper .md-inner .md-left, md-progress-circular .md-spinner-wrapper .md-inner .md-right {
  34. position: absolute;
  35. top: 0;
  36. height: 100px;
  37. width: 50px;
  38. overflow: hidden; }
  39. md-progress-circular .md-spinner-wrapper .md-inner .md-left .md-half-circle, md-progress-circular .md-spinner-wrapper .md-inner .md-right .md-half-circle {
  40. position: absolute;
  41. top: 0;
  42. width: 100px;
  43. height: 100px;
  44. box-sizing: border-box;
  45. border-width: 10px;
  46. border-style: solid;
  47. border-bottom-color: transparent;
  48. border-radius: 50%; }
  49. md-progress-circular .md-spinner-wrapper .md-inner .md-left {
  50. left: 0; }
  51. md-progress-circular .md-spinner-wrapper .md-inner .md-left .md-half-circle {
  52. left: 0;
  53. border-right-color: transparent; }
  54. md-progress-circular .md-spinner-wrapper .md-inner .md-right {
  55. right: 0; }
  56. md-progress-circular .md-spinner-wrapper .md-inner .md-right .md-half-circle {
  57. right: 0;
  58. border-left-color: transparent; }
  59. md-progress-circular .md-spinner-wrapper.md-mode-indeterminate {
  60. -webkit-animation: outer-rotate 2.91667s linear infinite;
  61. animation: outer-rotate 2.91667s linear infinite; }
  62. md-progress-circular .md-spinner-wrapper.md-mode-indeterminate .md-inner {
  63. -webkit-animation: sporadic-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
  64. animation: sporadic-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite; }
  65. md-progress-circular .md-spinner-wrapper.md-mode-indeterminate .md-inner .md-left .md-half-circle, md-progress-circular .md-spinner-wrapper.md-mode-indeterminate .md-inner .md-right .md-half-circle {
  66. -webkit-animation-iteration-count: infinite;
  67. animation-iteration-count: infinite;
  68. -webkit-animation-duration: 1.3125s;
  69. animation-duration: 1.3125s;
  70. -webkit-animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
  71. animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); }
  72. md-progress-circular .md-spinner-wrapper.md-mode-indeterminate .md-inner .md-left .md-half-circle {
  73. -webkit-animation-name: left-wobble;
  74. animation-name: left-wobble; }
  75. md-progress-circular .md-spinner-wrapper.md-mode-indeterminate .md-inner .md-right .md-half-circle {
  76. -webkit-animation-name: right-wobble;
  77. animation-name: right-wobble; }
  78. md-progress-circular md-progress-circular.ng-hide .md-spinner-wrapper {
  79. -webkit-animation: none;
  80. animation: none; }
  81. md-progress-circular md-progress-circular.ng-hide .md-spinner-wrapper .md-inner {
  82. -webkit-animation: none;
  83. animation: none; }
  84. md-progress-circular md-progress-circular.ng-hide .md-spinner-wrapper .md-inner .md-left .md-half-circle {
  85. -webkit-animation-name: none;
  86. animation-name: none; }
  87. md-progress-circular md-progress-circular.ng-hide .md-spinner-wrapper .md-inner .md-right .md-half-circle {
  88. -webkit-animation-name: none;
  89. animation-name: none; }
  90. md-progress-circular .md-spinner-wrapper.ng-hide {
  91. -webkit-animation: none;
  92. animation: none; }
  93. md-progress-circular .md-spinner-wrapper.ng-hide .md-inner {
  94. -webkit-animation: none;
  95. animation: none; }
  96. md-progress-circular .md-spinner-wrapper.ng-hide .md-inner .md-left .md-half-circle {
  97. -webkit-animation-name: none;
  98. animation-name: none; }
  99. md-progress-circular .md-spinner-wrapper.ng-hide .md-inner .md-right .md-half-circle {
  100. -webkit-animation-name: none;
  101. animation-name: none; }
  102. @-webkit-keyframes outer-rotate {
  103. 100% {
  104. -webkit-transform: rotate(360deg);
  105. transform: rotate(360deg); } }
  106. @keyframes outer-rotate {
  107. 100% {
  108. -webkit-transform: rotate(360deg);
  109. transform: rotate(360deg); } }
  110. @-webkit-keyframes left-wobble {
  111. 0%, 100% {
  112. -webkit-transform: rotate(130deg);
  113. transform: rotate(130deg); }
  114. 50% {
  115. -webkit-transform: rotate(-5deg);
  116. transform: rotate(-5deg); } }
  117. @keyframes left-wobble {
  118. 0%, 100% {
  119. -webkit-transform: rotate(130deg);
  120. transform: rotate(130deg); }
  121. 50% {
  122. -webkit-transform: rotate(-5deg);
  123. transform: rotate(-5deg); } }
  124. @-webkit-keyframes right-wobble {
  125. 0%, 100% {
  126. -webkit-transform: rotate(-130deg);
  127. transform: rotate(-130deg); }
  128. 50% {
  129. -webkit-transform: rotate(5deg);
  130. transform: rotate(5deg); } }
  131. @keyframes right-wobble {
  132. 0%, 100% {
  133. -webkit-transform: rotate(-130deg);
  134. transform: rotate(-130deg); }
  135. 50% {
  136. -webkit-transform: rotate(5deg);
  137. transform: rotate(5deg); } }
  138. @-webkit-keyframes sporadic-rotate {
  139. 12.5% {
  140. -webkit-transform: rotate(135deg);
  141. transform: rotate(135deg); }
  142. 25% {
  143. -webkit-transform: rotate(270deg);
  144. transform: rotate(270deg); }
  145. 37.5% {
  146. -webkit-transform: rotate(405deg);
  147. transform: rotate(405deg); }
  148. 50% {
  149. -webkit-transform: rotate(540deg);
  150. transform: rotate(540deg); }
  151. 62.5% {
  152. -webkit-transform: rotate(675deg);
  153. transform: rotate(675deg); }
  154. 75% {
  155. -webkit-transform: rotate(810deg);
  156. transform: rotate(810deg); }
  157. 87.5% {
  158. -webkit-transform: rotate(945deg);
  159. transform: rotate(945deg); }
  160. 100% {
  161. -webkit-transform: rotate(1080deg);
  162. transform: rotate(1080deg); } }
  163. @keyframes sporadic-rotate {
  164. 12.5% {
  165. -webkit-transform: rotate(135deg);
  166. transform: rotate(135deg); }
  167. 25% {
  168. -webkit-transform: rotate(270deg);
  169. transform: rotate(270deg); }
  170. 37.5% {
  171. -webkit-transform: rotate(405deg);
  172. transform: rotate(405deg); }
  173. 50% {
  174. -webkit-transform: rotate(540deg);
  175. transform: rotate(540deg); }
  176. 62.5% {
  177. -webkit-transform: rotate(675deg);
  178. transform: rotate(675deg); }
  179. 75% {
  180. -webkit-transform: rotate(810deg);
  181. transform: rotate(810deg); }
  182. 87.5% {
  183. -webkit-transform: rotate(945deg);
  184. transform: rotate(945deg); }
  185. 100% {
  186. -webkit-transform: rotate(1080deg);
  187. transform: rotate(1080deg); } }