| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- .ui-progress-spinner {
- position: relative;
- margin: 0 auto;
- width: 100px;
- height: 100px;
- display: inline-block;
- }
- .ui-progress-spinner::before {
- content: '';
- display: block;
- padding-top: 100%;
- }
- .ui-progress-spinner-svg {
- animation: ui-progress-spinner-rotate 2s linear infinite;
- height: 100%;
- transform-origin: center center;
- width: 100%;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- }
- .ui-progress-spinner-circle {
- stroke-dasharray: 89,200;
- stroke-dashoffset: 0;
- stroke: #d62d20;
- animation: ui-progress-spinner-dash 1.5s ease-in-out infinite, ui-progress-spinner-color 6s ease-in-out infinite;
- stroke-linecap: round;
- }
- @keyframes ui-progress-spinner-rotate {
- 100% {
- transform: rotate(360deg);
- }
- }
- @keyframes ui-progress-spinner-dash {
- 0% {
- stroke-dasharray: 1, 200;
- stroke-dashoffset: 0;
- }
- 50% {
- stroke-dasharray: 89, 200;
- stroke-dashoffset: -35px;
- }
- 100% {
- stroke-dasharray: 89, 200;
- stroke-dashoffset: -124px;
- }
- }
- @keyframes ui-progress-spinner-color {
- 100%,
- 0% {
- stroke: #d62d20;
- }
- 40% {
- stroke: #0057e7;
- }
- 66% {
- stroke: #008744;
- }
- 80%,
- 90% {
- stroke: #ffa700;
- }
- }
|