@panoramax/web-viewer/src/components/ui/ProgressBar.js

Panoramax web viewer for geolocated pictures

import { LitElement, css, html, nothing } from "lit";

/**
 * Progress bar with nice styling.
 * @class Panoramax.components.ui.ProgressBar
 * @element pnx-progress-bar
 * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
 * @example
 * ```html
 * <pnx-loader value="42" ._t=${viewer._t} />
 * ```
 */
export default class ProgressBar extends LitElement {
	/** @private */
	static styles = css`
		progress {
			max-width: 80vh;
			width: 300px;
			height: 16px;
			appearance: none;
			-webkit-appearance: none;
			border: 1px solid var(--grey-semi-dark);
			background-color: var(--grey);
			border-radius: 8px;
			overflow: hidden;
			padding: 3px;
			box-sizing: border-box;
			display: block;
		}

		progress::-webkit-progress-bar {
			background-color: var(--grey);
		}

		/* Don't merge with -moz below, for some f*ing reason a list selector doesn't work with Chrome */
		progress::-webkit-progress-value {
			background-color: var(--blue);
			border-radius: 5px;
			box-sizing: border-box;
		}

		progress::-moz-progress-bar {
			background-color: var(--blue);
			border-radius: 5px;
			box-sizing: border-box;
		}

		progress[value=""]::-moz-progress-bar,
		progress:not([value])::-moz-progress-bar {
			animation: indeterminateAnimation 1.5s infinite linear;
		}

		progress.indeterminate {
			position: relative;
			background-color: var(--grey);
			overflow: hidden;
		}

		progress.indeterminate::after {
			content: "";
			position: absolute;
			left: 3px;
			top: 3px;
			bottom: 3px;
			width: 20%;
			background-color: var(--blue);
			border-radius: 5px;
			animation: indeterminateAnimation 1.5s infinite linear;
			pointer-events: none;
		}

		@keyframes indeterminateAnimation {
			0%   { margin-left: 0%; width: 2%; }
			15%  { margin-left: 0%; width: 20%; }
			50%  { margin-left: 40%; width: 20%; }
			85%  { margin-left: 80%; width: 20%; }
			100% { margin-left: 98%; width: 2%; }
		}
	`;

	/**
	 * Component properties.
	 * @memberof Panoramax.components.ui.ProgressBar#
	 * @type {Object}
	 * @property {number} [value] Progress bar percentage (0-100) or empty for indeterminate state
	 */
	static properties = {
		value: {type: Number},
	};

	/** @private */
	render() {
		return html`
			<progress
				value=${this.value >= 0 ? this.value : nothing}
				class=${this.value >= 0 ? nothing : "indeterminate"}
				max="100"
				title=${this._t?.map.loading}
			></progress>
		`;
	}
}

customElements.define("pnx-progress-bar", ProgressBar);