/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v0.7.1 */ md-progress-linear { display: block; width: 100%; height: 5px; } md-progress-linear .md-container { overflow: hidden; position: relative; height: 5px; top: 5px; -webkit-transform: translate(0, 5px) scale(1, 0); transform: translate(0, 5px) scale(1, 0); transition: all 0.3s linear; } md-progress-linear .md-container.md-ready { -webkit-transform: translate(0, 0) scale(1, 1); transform: translate(0, 0) scale(1, 1); } md-progress-linear .md-bar { height: 5px; position: absolute; width: 100%; } md-progress-linear .md-bar1, md-progress-linear .md-bar2 { transition: all 0.2s linear; } md-progress-linear[md-mode=determinate] .md-bar1 { display: none; } md-progress-linear[md-mode=indeterminate] .md-bar1 { -webkit-animation: indeterminate1 4s infinite linear; animation: indeterminate1 4s infinite linear; } md-progress-linear[md-mode=indeterminate] .md-bar2 { -webkit-animation: indeterminate2 4s infinite linear; animation: indeterminate2 4s infinite linear; } md-progress-linear[md-mode=buffer] .md-container { background-color: transparent !important; } md-progress-linear[md-mode=buffer] .md-dashed:before { content: ""; display: block; height: 5px; width: 100%; margin-top: 0px; position: absolute; background-color: transparent; background-size: 10px 10px !important; background-position: 0px -23px; -webkit-animation: buffer 3s infinite linear; animation: buffer 3s infinite linear; } md-progress-linear[md-mode=query] .md-bar2 { -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1); animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1); } @-webkit-keyframes indeterminate1 { 0% { -webkit-transform: translateX(-25%) scale(0.5, 1); transform: translateX(-25%) scale(0.5, 1); } 10% { -webkit-transform: translateX(25%) scale(0.5, 1); transform: translateX(25%) scale(0.5, 1); } 19.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 20% { -webkit-transform: translateX(-37.5%) scale(0.25, 1); transform: translateX(-37.5%) scale(0.25, 1); } 30% { -webkit-transform: translateX(37.5%) scale(0.25, 1); transform: translateX(37.5%) scale(0.25, 1); } 34.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 36.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 37% { -webkit-transform: translateX(-37.5%) scale(0.25, 1); transform: translateX(-37.5%) scale(0.25, 1); } 47% { -webkit-transform: translateX(20%) scale(0.25, 1); transform: translateX(20%) scale(0.25, 1); } 52% { -webkit-transform: translateX(35%) scale(0.05, 1); transform: translateX(35%) scale(0.05, 1); } 55% { -webkit-transform: translateX(35%) scale(0.1, 1); transform: translateX(35%) scale(0.1, 1); } 58% { -webkit-transform: translateX(50%) scale(0.1, 1); transform: translateX(50%) scale(0.1, 1); } 61.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 69.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 70% { -webkit-transform: translateX(-37.5%) scale(0.25, 1); transform: translateX(-37.5%) scale(0.25, 1); } 80% { -webkit-transform: translateX(20%) scale(0.25, 1); transform: translateX(20%) scale(0.25, 1); } 85% { -webkit-transform: translateX(35%) scale(0.05, 1); transform: translateX(35%) scale(0.05, 1); } 88% { -webkit-transform: translateX(35%) scale(0.1, 1); transform: translateX(35%) scale(0.1, 1); } 91% { -webkit-transform: translateX(50%) scale(0.1, 1); transform: translateX(50%) scale(0.1, 1); } 92.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 93% { -webkit-transform: translateX(-50%) scale(0, 1); transform: translateX(-50%) scale(0, 1); } 100% { -webkit-transform: translateX(-25%) scale(0.5, 1); transform: translateX(-25%) scale(0.5, 1); } } @keyframes indeterminate1 { 0% { -webkit-transform: translateX(-25%) scale(0.5, 1); transform: translateX(-25%) scale(0.5, 1); } 10% { -webkit-transform: translateX(25%) scale(0.5, 1); transform: translateX(25%) scale(0.5, 1); } 19.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 20% { -webkit-transform: translateX(-37.5%) scale(0.25, 1); transform: translateX(-37.5%) scale(0.25, 1); } 30% { -webkit-transform: translateX(37.5%) scale(0.25, 1); transform: translateX(37.5%) scale(0.25, 1); } 34.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 36.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 37% { -webkit-transform: translateX(-37.5%) scale(0.25, 1); transform: translateX(-37.5%) scale(0.25, 1); } 47% { -webkit-transform: translateX(20%) scale(0.25, 1); transform: translateX(20%) scale(0.25, 1); } 52% { -webkit-transform: translateX(35%) scale(0.05, 1); transform: translateX(35%) scale(0.05, 1); } 55% { -webkit-transform: translateX(35%) scale(0.1, 1); transform: translateX(35%) scale(0.1, 1); } 58% { -webkit-transform: translateX(50%) scale(0.1, 1); transform: translateX(50%) scale(0.1, 1); } 61.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 69.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 70% { -webkit-transform: translateX(-37.5%) scale(0.25, 1); transform: translateX(-37.5%) scale(0.25, 1); } 80% { -webkit-transform: translateX(20%) scale(0.25, 1); transform: translateX(20%) scale(0.25, 1); } 85% { -webkit-transform: translateX(35%) scale(0.05, 1); transform: translateX(35%) scale(0.05, 1); } 88% { -webkit-transform: translateX(35%) scale(0.1, 1); transform: translateX(35%) scale(0.1, 1); } 91% { -webkit-transform: translateX(50%) scale(0.1, 1); transform: translateX(50%) scale(0.1, 1); } 92.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 93% { -webkit-transform: translateX(-50%) scale(0, 1); transform: translateX(-50%) scale(0, 1); } 100% { -webkit-transform: translateX(-25%) scale(0.5, 1); transform: translateX(-25%) scale(0.5, 1); } } @-webkit-keyframes indeterminate2 { 0% { -webkit-transform: translateX(-50%) scale(0, 1); transform: translateX(-50%) scale(0, 1); } 25.99% { -webkit-transform: translateX(-50%) scale(0, 1); transform: translateX(-50%) scale(0, 1); } 28% { -webkit-transform: translateX(-37.5%) scale(0.25, 1); transform: translateX(-37.5%) scale(0.25, 1); } 38% { -webkit-transform: translateX(37.5%) scale(0.25, 1); transform: translateX(37.5%) scale(0.25, 1); } 42.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 46.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 49.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 50% { -webkit-transform: translateX(-50%) scale(0, 1); transform: translateX(-50%) scale(0, 1); } 60% { -webkit-transform: translateX(-25%) scale(0.5, 1); transform: translateX(-25%) scale(0.5, 1); } 70% { -webkit-transform: translateX(25%) scale(0.5, 1); transform: translateX(25%) scale(0.5, 1); } 79.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } } @keyframes indeterminate2 { 0% { -webkit-transform: translateX(-50%) scale(0, 1); transform: translateX(-50%) scale(0, 1); } 25.99% { -webkit-transform: translateX(-50%) scale(0, 1); transform: translateX(-50%) scale(0, 1); } 28% { -webkit-transform: translateX(-37.5%) scale(0.25, 1); transform: translateX(-37.5%) scale(0.25, 1); } 38% { -webkit-transform: translateX(37.5%) scale(0.25, 1); transform: translateX(37.5%) scale(0.25, 1); } 42.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 46.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 49.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } 50% { -webkit-transform: translateX(-50%) scale(0, 1); transform: translateX(-50%) scale(0, 1); } 60% { -webkit-transform: translateX(-25%) scale(0.5, 1); transform: translateX(-25%) scale(0.5, 1); } 70% { -webkit-transform: translateX(25%) scale(0.5, 1); transform: translateX(25%) scale(0.5, 1); } 79.99% { -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); } } @-webkit-keyframes query { 0% { opacity: 1; -webkit-transform: translateX(35%) scale(0.3, 1); transform: translateX(35%) scale(0.3, 1); } 100% { opacity: 0; -webkit-transform: translateX(-50%) scale(0, 1); transform: translateX(-50%) scale(0, 1); } } @keyframes query { 0% { opacity: 1; -webkit-transform: translateX(35%) scale(0.3, 1); transform: translateX(35%) scale(0.3, 1); } 100% { opacity: 0; -webkit-transform: translateX(-50%) scale(0, 1); transform: translateX(-50%) scale(0, 1); } } @-webkit-keyframes buffer { 0% { opacity: 1; background-position: 0px -23px; } 50% { opacity: 0; } 100% { opacity: 1; background-position: -200px -23px; } } @keyframes buffer { 0% { opacity: 1; background-position: 0px -23px; } 50% { opacity: 0; } 100% { opacity: 1; background-position: -200px -23px; } }