:host {
  user-select: none;
  pointer-events: none;
  .loader-wrapper {
    z-index: 1100; // above dialogs
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 100px;
    svg {
      width: 100%;
      height: 100%;
      .ripple1 {
        transform-origin: center;
        animation: ripple 1.5s infinite;
      }
      .ripple2 {
        transform-origin: center;
        animation: ripple 1.5s infinite .4s;
      }
    }
  }
  &.show {
    .loader-wrapper {
      display: block;
    }
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
