.LoadingDots
  position: absolute
  display: flex
  width: 100%
  height: 100%
  justify-content: center
  align-items: center
  .loading-dots-a, .loading-dots-b, .loading-dots-c
    position: relative
    width: 4px
    height: 4px
    flex-shrink: 0
    background-color: var(--frame-fg)
    border-radius: 2px
    margin: 2px
  .loading-dots-a
    animation: loading-dots .7s infinite
  .loading-dots-b
    animation: loading-dots .7s .1s infinite
  .loading-dots-c
    animation: loading-dots .7s .2s infinite

#root[data-animations="none"] .LoadingDots
  .loading-dots-a, .loading-dots-b, .loading-dots-c
    animation: none

@keyframes loading-dots
  0%
    opacity: 0
  50%
    opacity: 1
  100%
    opacity: 0
