UNPKG

@haxtheweb/haxcms-nodejs

Version:

HAXcms single and multisite nodejs server, api, and administration

116 lines (95 loc) 2.92 kB
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);