From 84dc54c22ab2632459132ac35905cb0c7c8a2d8a Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Tue, 20 Aug 2019 12:03:51 +0200
Subject: [PATCH] Add a simple mini spinner
---
packages/common/vpu-mini-spinner.js | 53 +++++++++++++++++++++++++++++
1 file changed, 53 insertions(+)
create mode 100644 packages/common/vpu-mini-spinner.js
diff --git a/packages/common/vpu-mini-spinner.js b/packages/common/vpu-mini-spinner.js
new file mode 100644
index 00000000..c86289fc
--- /dev/null
+++ b/packages/common/vpu-mini-spinner.js
@@ -0,0 +1,53 @@
+import {html, LitElement, css} from 'lit-element';
+import commonUtils from './utils.js';
+
+
+class MiniSpinner extends LitElement {
+ constructor() {
+ super();
+ }
+
+ static get styles() {
+ return css`
+ .ring {
+ display: inline-block;
+ position: relative;
+ width: 1em;
+ height: 1em;
+ }
+ .ring div {
+ box-sizing: border-box;
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border: 0.2em solid #000;
+ border-radius: 50%;
+ animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ border-color: #000 transparent transparent transparent;
+ }
+ .ring div:nth-child(1) {
+ animation-delay: -0.45s;
+ }
+ .ring div:nth-child(2) {
+ animation-delay: -0.3s;
+ }
+ .ring div:nth-child(3) {
+ animation-delay: -0.15s;
+ }
+ @keyframes ring {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }`;
+ }
+
+ render() {
+ return html`<div class="ring"><div></div><div></div><div></div><div></div></div>`;
+ }
+}
+
+commonUtils.defineCustomElement('vpu-mini-spinner', MiniSpinner);
--
GitLab