/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v1.0.6 */ md-progress-circular { display: block; position: relative; width: 100px; height: 100px; padding-top: 0 !important; margin-bottom: 0 !important; z-index: 2; } md-progress-circular .md-spinner-wrapper { display: block; position: absolute; overflow: hidden; top: 50%; left: 50%; } md-progress-circular .md-spinner-wrapper .md-inner { width: 100px; height: 100px; position: relative; } md-progress-circular .md-spinner-wrapper .md-inner .md-gap { position: absolute; left: 49px; right: 49px; top: 0; bottom: 0; border-top-width: 10px; border-top-style: solid; box-sizing: border-box; } md-progress-circular .md-spinner-wrapper .md-inner .md-left, md-progress-circular .md-spinner-wrapper .md-inner .md-right { position: absolute; top: 0; height: 100px; width: 50px; overflow: hidden; } 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 { position: absolute; top: 0; width: 100px; height: 100px; box-sizing: border-box; border-width: 10px; border-style: solid; border-bottom-color: transparent; border-radius: 50%; } md-progress-circular .md-spinner-wrapper .md-inner .md-left { left: 0; } md-progress-circular .md-spinner-wrapper .md-inner .md-left .md-half-circle { left: 0; border-right-color: transparent; } md-progress-circular .md-spinner-wrapper .md-inner .md-right { right: 0; } md-progress-circular .md-spinner-wrapper .md-inner .md-right .md-half-circle { right: 0; border-left-color: transparent; } md-progress-circular .md-mode-indeterminate .md-spinner-wrapper { -webkit-animation: outer-rotate 2.91667s linear infinite; animation: outer-rotate 2.91667s linear infinite; } md-progress-circular .md-mode-indeterminate .md-spinner-wrapper .md-inner { -webkit-animation: sporadic-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite; animation: sporadic-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite; } md-progress-circular .md-mode-indeterminate .md-spinner-wrapper .md-inner .md-left .md-half-circle, md-progress-circular .md-mode-indeterminate .md-spinner-wrapper .md-inner .md-right .md-half-circle { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 1.3125s; animation-duration: 1.3125s; -webkit-animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); } md-progress-circular .md-mode-indeterminate .md-spinner-wrapper .md-inner .md-left .md-half-circle { -webkit-animation-name: left-wobble; animation-name: left-wobble; } md-progress-circular .md-mode-indeterminate .md-spinner-wrapper .md-inner .md-right .md-half-circle { -webkit-animation-name: right-wobble; animation-name: right-wobble; } md-progress-circular md-progress-circular.ng-hide .md-spinner-wrapper { -webkit-animation: none; animation: none; } md-progress-circular md-progress-circular.ng-hide .md-spinner-wrapper .md-inner { -webkit-animation: none; animation: none; } md-progress-circular md-progress-circular.ng-hide .md-spinner-wrapper .md-inner .md-left .md-half-circle { -webkit-animation-name: none; animation-name: none; } md-progress-circular md-progress-circular.ng-hide .md-spinner-wrapper .md-inner .md-right .md-half-circle { -webkit-animation-name: none; animation-name: none; } md-progress-circular .md-spinner-wrapper.ng-hide { -webkit-animation: none; animation: none; } md-progress-circular .md-spinner-wrapper.ng-hide .md-inner { -webkit-animation: none; animation: none; } md-progress-circular .md-spinner-wrapper.ng-hide .md-inner .md-left .md-half-circle { -webkit-animation-name: none; animation-name: none; } md-progress-circular .md-spinner-wrapper.ng-hide .md-inner .md-right .md-half-circle { -webkit-animation-name: none; animation-name: none; } @-webkit-keyframes outer-rotate { 0% { -webkit-transform: rotate(0deg) scale(0.5); transform: rotate(0deg) scale(0.5); } 100% { -webkit-transform: rotate(360deg) scale(0.5); transform: rotate(360deg) scale(0.5); } } @keyframes outer-rotate { 0% { -webkit-transform: rotate(0deg) scale(0.5); transform: rotate(0deg) scale(0.5); } 100% { -webkit-transform: rotate(360deg) scale(0.5); transform: rotate(360deg) scale(0.5); } } @-webkit-keyframes left-wobble { 0%, 100% { -webkit-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @keyframes left-wobble { 0%, 100% { -webkit-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @-webkit-keyframes right-wobble { 0%, 100% { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } } @keyframes right-wobble { 0%, 100% { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } } @-webkit-keyframes sporadic-rotate { 12.5% { -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); transform: rotate(945deg); } 100% { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); } } @keyframes sporadic-rotate { 12.5% { -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); transform: rotate(945deg); } 100% { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); } }