69 lines
1.6 KiB
CSS
69 lines
1.6 KiB
CSS
/*
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
*/
|
|
|
|
:host {
|
|
display: inline-block;
|
|
width: 200px;
|
|
height: 4px;
|
|
}
|
|
|
|
#progressContainer {
|
|
position: relative;
|
|
height: 100%;
|
|
background-color: #c8c8c8;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#activeProgress,
|
|
#secondaryProgress {
|
|
-webkit-transform-origin: left center;
|
|
transform-origin: left center;
|
|
-webkit-transform: scaleX(0);
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
#activeProgress {
|
|
background-color: #0f9d58;
|
|
}
|
|
|
|
#secondaryProgress {
|
|
background-color: #87ceac;
|
|
}
|
|
|
|
#activeProgress.indeterminate {
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center;
|
|
-webkit-animation: indeterminate-bar 1s linear infinite;
|
|
animation: indeterminate-bar 1s linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes indeterminate-bar {
|
|
0% {
|
|
-webkit-transform: translate(-50%) scaleX(0);
|
|
}
|
|
50% {
|
|
-webkit-transform: translate(0%) scaleX(0.3);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate(50%) scaleX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes indeterminate-bar {
|
|
0% {
|
|
transform: translate(-50%) scaleX(0);
|
|
}
|
|
50% {
|
|
transform: translate(0%) scaleX(0.3);
|
|
}
|
|
100% {
|
|
transform: translate(50%) scaleX(0);
|
|
}
|
|
}
|