@haxtheweb/haxcms-nodejs
Version:
HAXcms single and multisite nodejs server, api, and administration
116 lines (95 loc) • 2.92 kB
JavaScript
import"../../../vaadin-material-styles/color.js";import{html as t}from"../../../../@polymer/polymer/lib/utils/html-tag.js";const a=t`<dom-module id="material-progress-bar" theme-for="vaadin-progress-bar">
<template>
<style>
:host {
height: 4px;
margin: 8px 0;
position: relative;
overflow: hidden;
}
:host::before {
content: "";
display: block;
height: 100%;
background-color: var(--material-primary-color);
opacity: 0.16;
}
[part="bar"] {
position: absolute;
top: 0;
width: 100%;
transform: scaleX(var(--vaadin-progress-value));
transform-origin: 0 0;
}
[part="value"] {
transform: none;
background-color: var(--material-primary-color);
}
/* Indeterminate */
:host([indeterminate]) [part="bar"] {
left: -100%;
animation: primary-indeterminate-translate 2s infinite linear;
}
:host([indeterminate]) [part="value"] {
animation: primary-indeterminate-scale 2s infinite linear;
}
@keyframes primary-indeterminate-translate {
0% {
transform: translateX(0);
}
20% {
animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
transform: translateX(0);
}
59.15% {
animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
transform: translateX(83.67142%);
}
100% {
transform: translateX(200.611057%);
}
}
@keyframes primary-indeterminate-scale {
0% {
transform: scaleX(.08);
}
36.65% {
animation-timing-function: cubic-bezier(.334731, .12482, .785844, 1);
transform: scaleX(.08);
}
69.15% {
animation-timing-function: cubic-bezier(.06, .11, .6, 1);
transform: scaleX(.661479);
}
100% {
transform: scaleX(.08);
}
}
/* RTL specific styles */
:host([dir="rtl"]) [part="bar"] {
transform-origin: 100% 0;
}
:host([indeterminate][dir="rtl"]) [part="bar"] {
left: auto;
right: -100%;
animation: primary-indeterminate-translate-rtl 2s infinite linear;
}
@keyframes primary-indeterminate-translate-rtl {
0% {
transform: translateX(0);
}
20% {
animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
transform: translateX(0);
}
59.15% {
animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
transform: translateX(-83.67142%);
}
100% {
transform: translateX(-200.611057%);
}
}
</style>
</template>
</dom-module>`;document.head.appendChild(a.content);