progressspinner.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. .ui-progress-spinner {
  2. position: relative;
  3. margin: 0 auto;
  4. width: 100px;
  5. height: 100px;
  6. display: inline-block;
  7. }
  8. .ui-progress-spinner::before {
  9. content: '';
  10. display: block;
  11. padding-top: 100%;
  12. }
  13. .ui-progress-spinner-svg {
  14. animation: ui-progress-spinner-rotate 2s linear infinite;
  15. height: 100%;
  16. transform-origin: center center;
  17. width: 100%;
  18. position: absolute;
  19. top: 0;
  20. bottom: 0;
  21. left: 0;
  22. right: 0;
  23. margin: auto;
  24. }
  25. .ui-progress-spinner-circle {
  26. stroke-dasharray: 89,200;
  27. stroke-dashoffset: 0;
  28. stroke: #d62d20;
  29. animation: ui-progress-spinner-dash 1.5s ease-in-out infinite, ui-progress-spinner-color 6s ease-in-out infinite;
  30. stroke-linecap: round;
  31. }
  32. @keyframes ui-progress-spinner-rotate {
  33. 100% {
  34. transform: rotate(360deg);
  35. }
  36. }
  37. @keyframes ui-progress-spinner-dash {
  38. 0% {
  39. stroke-dasharray: 1, 200;
  40. stroke-dashoffset: 0;
  41. }
  42. 50% {
  43. stroke-dasharray: 89, 200;
  44. stroke-dashoffset: -35px;
  45. }
  46. 100% {
  47. stroke-dasharray: 89, 200;
  48. stroke-dashoffset: -124px;
  49. }
  50. }
  51. @keyframes ui-progress-spinner-color {
  52. 100%,
  53. 0% {
  54. stroke: #d62d20;
  55. }
  56. 40% {
  57. stroke: #0057e7;
  58. }
  59. 66% {
  60. stroke: #008744;
  61. }
  62. 80%,
  63. 90% {
  64. stroke: #ffa700;
  65. }
  66. }