SHARE
TWEET

Untitled

a guest Feb 20th, 2019 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { LitElement, html, css } from 'lit-element'
  2.  
  3. class LoadingBlocker extends LitElement {
  4.   static get styles () {
  5.     return css`
  6.       #overlay {
  7.         position: fixed;
  8.         top: 0; left: 0;
  9.         width: 100%; height: 100vh;
  10.         background: rgba(0,0,0,0.75);
  11.         z-index: 10;
  12.         opacity: 1;
  13.         pointer-events: all;
  14.         display: flex;
  15.         justify-content: center;
  16.         align-items: center;
  17.       }
  18.       .lds-dual-ring {
  19.         display: inline-block;
  20.         width: 64px;
  21.         height: 64px;
  22.       }
  23.       .lds-dual-ring:after {
  24.         content: " ";
  25.         display: block;
  26.         width: 46px;
  27.         height: 46px;
  28.         margin: 1px;
  29.         border-radius: 50%;
  30.         border: 5px solid #fff;
  31.         border-color: #fff transparent #fff transparent;
  32.         animation: lds-dual-ring 1.2s linear infinite;
  33.       }
  34.       @keyframes lds-dual-ring {
  35.         0% {
  36.           transform: rotate(0deg);
  37.         }
  38.         100% {
  39.           transform: rotate(360deg);
  40.         }
  41.       }
  42.     `
  43.   }
  44.  
  45.   static get properties () {
  46.     return { loading: { type: Boolean } }
  47.   }
  48.  
  49.   constructor () {
  50.     super()
  51.     this.loading = false
  52.   }
  53.  
  54.   render () {
  55.     return html`
  56.       ${this.loading ? html`
  57.         <div id="overlay">
  58.           <div class="lds-dual-ring"></div>
  59.         </div>
  60.       ` : ''}
  61.     `
  62.   }
  63. }
  64.  
  65. customElements.define('loading-blocker', LoadingBlocker)
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top