progress-barpackage.theme.lumo.vaadin-progress-bar-styles.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation
Show all versions of vaadin-webcomponents Show documentation
Mvnpm composite: Vaadin webcomponents
The newest version!
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/sizing.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/style.js';
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
registerStyles(
'vaadin-progress-bar',
css`
:host {
height: calc(var(--lumo-size-l) / 10);
margin: var(--lumo-space-s) 0;
}
[part='bar'] {
border-radius: var(--lumo-border-radius-m);
background-color: var(--lumo-contrast-10pct);
}
[part='value'] {
border-radius: var(--lumo-border-radius-m);
background-color: var(--lumo-primary-color);
/* Use width instead of transform to preserve border radius */
transform: none;
width: calc(var(--vaadin-progress-value) * 100%);
will-change: width;
transition: 0.1s width linear;
}
/* Indeterminate mode */
:host([indeterminate]) [part='value'] {
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
to right,
var(--lumo-primary-color-10pct) 10%,
var(--lumo-primary-color)
);
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
to left,
var(--lumo-primary-color-10pct) 10%,
var(--lumo-primary-color)
);
width: 100%;
background-color: transparent !important;
background-image: var(--lumo-progress-indeterminate-progress-bar-background);
opacity: 0.75;
will-change: transform;
animation: vaadin-progress-indeterminate 1.6s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
@keyframes vaadin-progress-indeterminate {
0% {
transform: scaleX(0.015);
transform-origin: 0% 0%;
}
25% {
transform: scaleX(0.4);
}
50% {
transform: scaleX(0.015);
transform-origin: 100% 0%;
background-image: var(--lumo-progress-indeterminate-progress-bar-background);
}
50.1% {
transform: scaleX(0.015);
transform-origin: 100% 0%;
background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
}
75% {
transform: scaleX(0.4);
}
100% {
transform: scaleX(0.015);
transform-origin: 0% 0%;
background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
}
}
:host(:not([aria-valuenow])) [part='value']::before,
:host([indeterminate]) [part='value']::before {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
background-color: var(--lumo-primary-color);
will-change: opacity;
animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
@keyframes vaadin-progress-pulse3 {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
50.1% {
opacity: 1;
}
60% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Contrast color */
:host([theme~='contrast']) [part='value'],
:host([theme~='contrast']) [part='value']::before {
background-color: var(--lumo-contrast-80pct);
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
to right,
var(--lumo-contrast-5pct) 10%,
var(--lumo-contrast-80pct)
);
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
to left,
var(--lumo-contrast-5pct) 10%,
var(--lumo-contrast-60pct)
);
}
/* Error color */
:host([theme~='error']) [part='value'],
:host([theme~='error']) [part='value']::before {
background-color: var(--lumo-error-color);
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
to right,
var(--lumo-error-color-10pct) 10%,
var(--lumo-error-color)
);
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
to left,
var(--lumo-error-color-10pct) 10%,
var(--lumo-error-color)
);
}
/* Primary color */
:host([theme~='success']) [part='value'],
:host([theme~='success']) [part='value']::before {
background-color: var(--lumo-success-color);
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
to right,
var(--lumo-success-color-10pct) 10%,
var(--lumo-success-color)
);
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
to left,
var(--lumo-success-color-10pct) 10%,
var(--lumo-success-color)
);
}
/* RTL specific styles */
:host([indeterminate][dir='rtl']) [part='value'] {
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
to left,
var(--lumo-primary-color-10pct) 10%,
var(--lumo-primary-color)
);
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
to right,
var(--lumo-primary-color-10pct) 10%,
var(--lumo-primary-color)
);
animation: vaadin-progress-indeterminate-rtl 1.6s infinite cubic-bezier(0.355, 0.045, 0.645, 1);
}
:host(:not([aria-valuenow])[dir='rtl']) [part='value']::before,
:host([indeterminate][dir='rtl']) [part='value']::before {
animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(0.355, 0.045, 0.645, 1);
}
@keyframes vaadin-progress-indeterminate-rtl {
0% {
transform: scaleX(0.015);
transform-origin: 100% 0%;
}
25% {
transform: scaleX(0.4);
}
50% {
transform: scaleX(0.015);
transform-origin: 0% 0%;
background-image: var(--lumo-progress-indeterminate-progress-bar-background);
}
50.1% {
transform: scaleX(0.015);
transform-origin: 0% 0%;
background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
}
75% {
transform: scaleX(0.4);
}
100% {
transform: scaleX(0.015);
transform-origin: 100% 0%;
background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
}
}
/* Contrast color */
:host([theme~='contrast'][dir='rtl']) [part='value'],
:host([theme~='contrast'][dir='rtl']) [part='value']::before {
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
to left,
var(--lumo-contrast-5pct) 10%,
var(--lumo-contrast-80pct)
);
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
to right,
var(--lumo-contrast-5pct) 10%,
var(--lumo-contrast-60pct)
);
}
/* Error color */
:host([theme~='error'][dir='rtl']) [part='value'],
:host([theme~='error'][dir='rtl']) [part='value']::before {
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
to left,
var(--lumo-error-color-10pct) 10%,
var(--lumo-error-color)
);
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
to right,
var(--lumo-error-color-10pct) 10%,
var(--lumo-error-color)
);
}
/* Primary color */
:host([theme~='success'][dir='rtl']) [part='value'],
:host([theme~='success'][dir='rtl']) [part='value']::before {
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
to left,
var(--lumo-success-color-10pct) 10%,
var(--lumo-success-color)
);
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
to right,
var(--lumo-success-color-10pct) 10%,
var(--lumo-success-color)
);
}
`,
{ moduleId: 'lumo-progress-bar' },
);