diff --git a/packages/common/vpu-common-demo.js b/packages/common/vpu-common-demo.js index a0874dbd552cd1e068ce043d69ecdd343c86dc0b..01c13798acaae6f10a1a8cd0fe440b26530be05f 100644 --- a/packages/common/vpu-common-demo.js +++ b/packages/common/vpu-common-demo.js @@ -99,6 +99,7 @@ class VpuCommonDemo extends LitElement { <div class="content"> <h2>Mini Spinner</h2> <div class="control"> + <vpu-mini-spinner text="Loading..."></vpu-mini-spinner> <vpu-mini-spinner></vpu-mini-spinner> <vpu-mini-spinner style="font-size: 2em"></vpu-mini-spinner> <vpu-mini-spinner style="font-size: 3em"></vpu-mini-spinner> diff --git a/packages/common/vpu-mini-spinner.js b/packages/common/vpu-mini-spinner.js index 199e212117eebaff6ffc551a6ed05fee30c10b06..1d0c991605d66b0643a8d8681abeed46553fdb1b 100644 --- a/packages/common/vpu-mini-spinner.js +++ b/packages/common/vpu-mini-spinner.js @@ -5,10 +5,21 @@ import * as commonUtils from './utils.js'; class MiniSpinner extends LitElement { constructor() { super(); + this.text = ""; + } + + static get properties() { + return { + text: { type: String }, + }; } static get styles() { + // language=css return css` + .outer { + display: flex; + } .ring { display: inline-block; position: relative; @@ -42,11 +53,18 @@ class MiniSpinner extends LitElement { 100% { transform: rotate(360deg); } + } + .text { + display: inline-block; + margin-left: 0.5em; + font-size: 0.7em; }`; } render() { - return html`<div class="ring"><div></div><div></div><div></div><div></div></div>`; + const textHtml = this.text !== "" ? html`<div class="text">${this.text}</div>` : html``; + + return html`<div class="outer"><div class="ring"><div></div><div></div><div></div><div></div></div>${textHtml}</div>`; } }