mdc.circular-progress.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
  7. */
  8. .mdc-circular-progress__determinate-circle,
  9. .mdc-circular-progress__indeterminate-circle-graphic {
  10. stroke: #6200ee;
  11. /* @alternate */
  12. stroke: var(--mdc-theme-primary, #6200ee);
  13. }
  14. @media screen and (forced-colors: active), (-ms-high-contrast: active) {
  15. .mdc-circular-progress__determinate-circle,
  16. .mdc-circular-progress__indeterminate-circle-graphic {
  17. stroke: CanvasText;
  18. }
  19. }
  20. .mdc-circular-progress__determinate-track {
  21. stroke: transparent;
  22. }
  23. @-webkit-keyframes mdc-circular-progress-container-rotate {
  24. to {
  25. /* @noflip */
  26. /*rtl:ignore*/
  27. -webkit-transform: rotate(360deg);
  28. transform: rotate(360deg);
  29. }
  30. }
  31. @keyframes mdc-circular-progress-container-rotate {
  32. to {
  33. /* @noflip */
  34. /*rtl:ignore*/
  35. -webkit-transform: rotate(360deg);
  36. transform: rotate(360deg);
  37. }
  38. }
  39. @-webkit-keyframes mdc-circular-progress-spinner-layer-rotate {
  40. 12.5% {
  41. /* @noflip */
  42. /*rtl:ignore*/
  43. -webkit-transform: rotate(135deg);
  44. transform: rotate(135deg);
  45. }
  46. 25% {
  47. /* @noflip */
  48. /*rtl:ignore*/
  49. -webkit-transform: rotate(270deg);
  50. transform: rotate(270deg);
  51. }
  52. 37.5% {
  53. /* @noflip */
  54. /*rtl:ignore*/
  55. -webkit-transform: rotate(405deg);
  56. transform: rotate(405deg);
  57. }
  58. 50% {
  59. /* @noflip */
  60. /*rtl:ignore*/
  61. -webkit-transform: rotate(540deg);
  62. transform: rotate(540deg);
  63. }
  64. 62.5% {
  65. /* @noflip */
  66. /*rtl:ignore*/
  67. -webkit-transform: rotate(675deg);
  68. transform: rotate(675deg);
  69. }
  70. 75% {
  71. /* @noflip */
  72. /*rtl:ignore*/
  73. -webkit-transform: rotate(810deg);
  74. transform: rotate(810deg);
  75. }
  76. 87.5% {
  77. /* @noflip */
  78. /*rtl:ignore*/
  79. -webkit-transform: rotate(945deg);
  80. transform: rotate(945deg);
  81. }
  82. 100% {
  83. /* @noflip */
  84. /*rtl:ignore*/
  85. -webkit-transform: rotate(1080deg);
  86. transform: rotate(1080deg);
  87. }
  88. }
  89. @keyframes mdc-circular-progress-spinner-layer-rotate {
  90. 12.5% {
  91. /* @noflip */
  92. /*rtl:ignore*/
  93. -webkit-transform: rotate(135deg);
  94. transform: rotate(135deg);
  95. }
  96. 25% {
  97. /* @noflip */
  98. /*rtl:ignore*/
  99. -webkit-transform: rotate(270deg);
  100. transform: rotate(270deg);
  101. }
  102. 37.5% {
  103. /* @noflip */
  104. /*rtl:ignore*/
  105. -webkit-transform: rotate(405deg);
  106. transform: rotate(405deg);
  107. }
  108. 50% {
  109. /* @noflip */
  110. /*rtl:ignore*/
  111. -webkit-transform: rotate(540deg);
  112. transform: rotate(540deg);
  113. }
  114. 62.5% {
  115. /* @noflip */
  116. /*rtl:ignore*/
  117. -webkit-transform: rotate(675deg);
  118. transform: rotate(675deg);
  119. }
  120. 75% {
  121. /* @noflip */
  122. /*rtl:ignore*/
  123. -webkit-transform: rotate(810deg);
  124. transform: rotate(810deg);
  125. }
  126. 87.5% {
  127. /* @noflip */
  128. /*rtl:ignore*/
  129. -webkit-transform: rotate(945deg);
  130. transform: rotate(945deg);
  131. }
  132. 100% {
  133. /* @noflip */
  134. /*rtl:ignore*/
  135. -webkit-transform: rotate(1080deg);
  136. transform: rotate(1080deg);
  137. }
  138. }
  139. @-webkit-keyframes mdc-circular-progress-color-1-fade-in-out {
  140. from {
  141. opacity: 0.99;
  142. }
  143. 25% {
  144. opacity: 0.99;
  145. }
  146. 26% {
  147. opacity: 0;
  148. }
  149. 89% {
  150. opacity: 0;
  151. }
  152. 90% {
  153. opacity: 0.99;
  154. }
  155. to {
  156. opacity: 0.99;
  157. }
  158. }
  159. @keyframes mdc-circular-progress-color-1-fade-in-out {
  160. from {
  161. opacity: 0.99;
  162. }
  163. 25% {
  164. opacity: 0.99;
  165. }
  166. 26% {
  167. opacity: 0;
  168. }
  169. 89% {
  170. opacity: 0;
  171. }
  172. 90% {
  173. opacity: 0.99;
  174. }
  175. to {
  176. opacity: 0.99;
  177. }
  178. }
  179. @-webkit-keyframes mdc-circular-progress-color-2-fade-in-out {
  180. from {
  181. opacity: 0;
  182. }
  183. 15% {
  184. opacity: 0;
  185. }
  186. 25% {
  187. opacity: 0.99;
  188. }
  189. 50% {
  190. opacity: 0.99;
  191. }
  192. 51% {
  193. opacity: 0;
  194. }
  195. to {
  196. opacity: 0;
  197. }
  198. }
  199. @keyframes mdc-circular-progress-color-2-fade-in-out {
  200. from {
  201. opacity: 0;
  202. }
  203. 15% {
  204. opacity: 0;
  205. }
  206. 25% {
  207. opacity: 0.99;
  208. }
  209. 50% {
  210. opacity: 0.99;
  211. }
  212. 51% {
  213. opacity: 0;
  214. }
  215. to {
  216. opacity: 0;
  217. }
  218. }
  219. @-webkit-keyframes mdc-circular-progress-color-3-fade-in-out {
  220. from {
  221. opacity: 0;
  222. }
  223. 40% {
  224. opacity: 0;
  225. }
  226. 50% {
  227. opacity: 0.99;
  228. }
  229. 75% {
  230. opacity: 0.99;
  231. }
  232. 76% {
  233. opacity: 0;
  234. }
  235. to {
  236. opacity: 0;
  237. }
  238. }
  239. @keyframes mdc-circular-progress-color-3-fade-in-out {
  240. from {
  241. opacity: 0;
  242. }
  243. 40% {
  244. opacity: 0;
  245. }
  246. 50% {
  247. opacity: 0.99;
  248. }
  249. 75% {
  250. opacity: 0.99;
  251. }
  252. 76% {
  253. opacity: 0;
  254. }
  255. to {
  256. opacity: 0;
  257. }
  258. }
  259. @-webkit-keyframes mdc-circular-progress-color-4-fade-in-out {
  260. from {
  261. opacity: 0;
  262. }
  263. 65% {
  264. opacity: 0;
  265. }
  266. 75% {
  267. opacity: 0.99;
  268. }
  269. 90% {
  270. opacity: 0.99;
  271. }
  272. to {
  273. opacity: 0;
  274. }
  275. }
  276. @keyframes mdc-circular-progress-color-4-fade-in-out {
  277. from {
  278. opacity: 0;
  279. }
  280. 65% {
  281. opacity: 0;
  282. }
  283. 75% {
  284. opacity: 0.99;
  285. }
  286. 90% {
  287. opacity: 0.99;
  288. }
  289. to {
  290. opacity: 0;
  291. }
  292. }
  293. @-webkit-keyframes mdc-circular-progress-left-spin {
  294. from {
  295. /* @noflip */
  296. /*rtl:ignore*/
  297. -webkit-transform: rotate(265deg);
  298. transform: rotate(265deg);
  299. }
  300. 50% {
  301. /* @noflip */
  302. /*rtl:ignore*/
  303. -webkit-transform: rotate(130deg);
  304. transform: rotate(130deg);
  305. }
  306. to {
  307. /* @noflip */
  308. /*rtl:ignore*/
  309. -webkit-transform: rotate(265deg);
  310. transform: rotate(265deg);
  311. }
  312. }
  313. @keyframes mdc-circular-progress-left-spin {
  314. from {
  315. /* @noflip */
  316. /*rtl:ignore*/
  317. -webkit-transform: rotate(265deg);
  318. transform: rotate(265deg);
  319. }
  320. 50% {
  321. /* @noflip */
  322. /*rtl:ignore*/
  323. -webkit-transform: rotate(130deg);
  324. transform: rotate(130deg);
  325. }
  326. to {
  327. /* @noflip */
  328. /*rtl:ignore*/
  329. -webkit-transform: rotate(265deg);
  330. transform: rotate(265deg);
  331. }
  332. }
  333. @-webkit-keyframes mdc-circular-progress-right-spin {
  334. from {
  335. /* @noflip */
  336. /*rtl:ignore*/
  337. -webkit-transform: rotate(-265deg);
  338. transform: rotate(-265deg);
  339. }
  340. 50% {
  341. /* @noflip */
  342. /*rtl:ignore*/
  343. -webkit-transform: rotate(-130deg);
  344. transform: rotate(-130deg);
  345. }
  346. to {
  347. /* @noflip */
  348. /*rtl:ignore*/
  349. -webkit-transform: rotate(-265deg);
  350. transform: rotate(-265deg);
  351. }
  352. }
  353. @keyframes mdc-circular-progress-right-spin {
  354. from {
  355. /* @noflip */
  356. /*rtl:ignore*/
  357. -webkit-transform: rotate(-265deg);
  358. transform: rotate(-265deg);
  359. }
  360. 50% {
  361. /* @noflip */
  362. /*rtl:ignore*/
  363. -webkit-transform: rotate(-130deg);
  364. transform: rotate(-130deg);
  365. }
  366. to {
  367. /* @noflip */
  368. /*rtl:ignore*/
  369. -webkit-transform: rotate(-265deg);
  370. transform: rotate(-265deg);
  371. }
  372. }
  373. .mdc-circular-progress {
  374. display: inline-flex;
  375. position: relative;
  376. /* @noflip */
  377. /*rtl:ignore*/
  378. direction: ltr;
  379. line-height: 0;
  380. transition: opacity 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  381. }
  382. .mdc-circular-progress__determinate-container,
  383. .mdc-circular-progress__indeterminate-circle-graphic,
  384. .mdc-circular-progress__indeterminate-container,
  385. .mdc-circular-progress__spinner-layer {
  386. position: absolute;
  387. width: 100%;
  388. height: 100%;
  389. }
  390. .mdc-circular-progress__determinate-container {
  391. /* @noflip */
  392. /*rtl:ignore*/
  393. -webkit-transform: rotate(-90deg);
  394. transform: rotate(-90deg);
  395. }
  396. .mdc-circular-progress__indeterminate-container {
  397. font-size: 0;
  398. letter-spacing: 0;
  399. white-space: nowrap;
  400. opacity: 0;
  401. }
  402. .mdc-circular-progress__determinate-circle-graphic,
  403. .mdc-circular-progress__indeterminate-circle-graphic {
  404. fill: transparent;
  405. }
  406. .mdc-circular-progress__determinate-circle {
  407. transition: stroke-dashoffset 500ms 0ms cubic-bezier(0, 0, 0.2, 1);
  408. }
  409. .mdc-circular-progress__gap-patch {
  410. position: absolute;
  411. top: 0;
  412. /* @noflip */
  413. /*rtl:ignore*/
  414. left: 47.5%;
  415. box-sizing: border-box;
  416. width: 5%;
  417. height: 100%;
  418. overflow: hidden;
  419. }
  420. .mdc-circular-progress__gap-patch .mdc-circular-progress__indeterminate-circle-graphic {
  421. /* @noflip */
  422. /*rtl:ignore*/
  423. left: -900%;
  424. width: 2000%;
  425. /* @noflip */
  426. /*rtl:ignore*/
  427. -webkit-transform: rotate(180deg);
  428. transform: rotate(180deg);
  429. }
  430. .mdc-circular-progress__circle-clipper {
  431. display: inline-flex;
  432. position: relative;
  433. width: 50%;
  434. height: 100%;
  435. overflow: hidden;
  436. }
  437. .mdc-circular-progress__circle-clipper .mdc-circular-progress__indeterminate-circle-graphic {
  438. width: 200%;
  439. }
  440. .mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic {
  441. /* @noflip */
  442. /*rtl:ignore*/
  443. left: -100%;
  444. }
  445. .mdc-circular-progress--indeterminate .mdc-circular-progress__determinate-container {
  446. opacity: 0;
  447. }
  448. .mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container {
  449. opacity: 1;
  450. }
  451. .mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container {
  452. -webkit-animation: mdc-circular-progress-container-rotate 1568.2352941176ms linear infinite;
  453. animation: mdc-circular-progress-container-rotate 1568.2352941176ms linear infinite;
  454. }
  455. .mdc-circular-progress--indeterminate .mdc-circular-progress__spinner-layer {
  456. -webkit-animation: mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  457. animation: mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  458. }
  459. .mdc-circular-progress--indeterminate .mdc-circular-progress__color-1 {
  460. -webkit-animation: mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdc-circular-progress-color-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  461. animation: mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdc-circular-progress-color-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  462. }
  463. .mdc-circular-progress--indeterminate .mdc-circular-progress__color-2 {
  464. -webkit-animation: mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdc-circular-progress-color-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  465. animation: mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdc-circular-progress-color-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  466. }
  467. .mdc-circular-progress--indeterminate .mdc-circular-progress__color-3 {
  468. -webkit-animation: mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdc-circular-progress-color-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  469. animation: mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdc-circular-progress-color-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  470. }
  471. .mdc-circular-progress--indeterminate .mdc-circular-progress__color-4 {
  472. -webkit-animation: mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdc-circular-progress-color-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  473. animation: mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdc-circular-progress-color-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  474. }
  475. .mdc-circular-progress--indeterminate .mdc-circular-progress__circle-left .mdc-circular-progress__indeterminate-circle-graphic {
  476. /* @noflip */
  477. /*rtl:ignore*/
  478. -webkit-animation: mdc-circular-progress-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  479. animation: mdc-circular-progress-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  480. }
  481. .mdc-circular-progress--indeterminate .mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic {
  482. /* @noflip */
  483. /*rtl:ignore*/
  484. -webkit-animation: mdc-circular-progress-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  485. animation: mdc-circular-progress-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  486. }
  487. .mdc-circular-progress--closed {
  488. opacity: 0;
  489. }
  490. /*# sourceMappingURL=mdc.circular-progress.css.map*/