1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update loading

This commit is contained in:
Luke Pulverenti 2016-08-04 00:39:19 -04:00
parent f7f42a9777
commit 5516424502
22 changed files with 739 additions and 145 deletions

View file

@ -60,19 +60,27 @@ the value changed. You can also customize the transition:
--paper-progress-transition-transition-delay: 0s;
}
To change the duration of the indeterminate cycle:
paper-progress {
--paper-progress-indeterminate-cycle-duration: 2s;
}
The following mixins are available for styling:
Custom property | Description | Default
----------------------------------------------|---------------------------------------------|--------------
`--paper-progress-container-color` | Mixin applied to container | `--google-grey-300`
`--paper-progress-transition-duration` | Duration of the transition | `0.008s`
`--paper-progress-transition-timing-function` | The timing function for the transition | `ease`
`--paper-progress-transition-delay` | delay for the transition | `0s`
`--paper-progress-active-color` | The color of the active bar | `--google-green-500`
`--paper-progress-secondary-color` | The color of the secondary bar | `--google-green-100`
`--paper-progress-disabled-active-color` | The color of the active bar if disabled | `--google-grey-500`
`--paper-progress-disabled-secondary-color` | The color of the secondary bar if disabled | `--google-grey-300`
`--paper-progress-height` | The height of the progress bar | `4px`
Custom property | Description | Default
-------------------------------------------------|---------------------------------------------|--------------
`--paper-progress-container` | Mixin applied to container | `{}`
`--paper-progress-transition-duration` | Duration of the transition | `0.008s`
`--paper-progress-transition-timing-function` | The timing function for the transition | `ease`
`--paper-progress-transition-delay` | delay for the transition | `0s`
`--paper-progress-container-color` | Color of the container | `--google-grey-300`
`--paper-progress-active-color` | The color of the active bar | `--google-green-500`
`--paper-progress-secondary-color` | The color of the secondary bar | `--google-green-100`
`--paper-progress-disabled-active-color` | The color of the active bar if disabled | `--google-grey-500`
`--paper-progress-disabled-secondary-color` | The color of the secondary bar if disabled | `--google-grey-300`
`--paper-progress-height` | The height of the progress bar | `4px`
`--paper-progress-indeterminate-cycle-duration` | Duration of an indeterminate cycle | `2s`
@group Paper Elements
@element paper-progress
@ -90,7 +98,12 @@ Custom property | Description
overflow: hidden;
}
:host([hidden]) {
display: none !important;
}
#progressContainer {
@apply(--paper-progress-container);
position: relative;
}
@ -158,8 +171,8 @@ Custom property | Description
:host(:not([disabled])) #primaryProgress.indeterminate {
-webkit-transform-origin: right center;
transform-origin: right center;
-webkit-animation: indeterminate-bar 2s linear infinite;
animation: indeterminate-bar 2s linear infinite;
-webkit-animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
}
:host(:not([disabled])) #primaryProgress.indeterminate::after {
@ -167,8 +180,8 @@ Custom property | Description
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation: indeterminate-splitter 2s linear infinite;
animation: indeterminate-splitter 2s linear infinite;
-webkit-animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
}
@-webkit-keyframes indeterminate-bar {