mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update loading
This commit is contained in:
parent
f7f42a9777
commit
5516424502
22 changed files with 739 additions and 145 deletions
|
@ -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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue