.tn-genie-loading-wrapper{
  display flex
  position relative
  z-index 1
  width 100%
  height 100%
  align-items center
  justify-content center
  img {
    width 70px
  }
}
.tn-loading
  transition: opacity .3s ease-out
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  &__wrapper
    top 50%
    left 50%
    position fixed
    // width 48px
    transform translate(-50%, -50%)
    border-radius 5px
    background rgba(0, 0, 0, 0.7)
    color white
    box-sizing border-box
    text-align center
    z-index 10000

  &__mask
    position absolute
    margin 0
    top 0
    right 0
    bottom 0
    left 0
    background-color rgba(255, 255, 255, .8)

  &__text
    font-size 10px
    margin-top 5px
    display inline-block

.tn-loading-enter, .tn-loading-leave-to
  opacity: 0

.sk-circle
  width 30px
  height 30px
  position relative
  margin 0 auto
.sk-circle .sk-child
  width 100%
  height 100%
  position absolute
  left 0
  top 0
.sk-circle .sk-child:before
  content ' '
  display block
  margin 0 auto
  width 15%
  height 15%
  background-color #FFF
  border-radius 100%
  animation sk-circleBounceDelay 1.2s infinite ease-in-out both
.sk-circle .sk-circle2
  transform: rotate(30deg);
.sk-circle .sk-circle3
  transform: rotate(60deg);
.sk-circle .sk-circle4
  transform: rotate(90deg);
.sk-circle .sk-circle5
  transform: rotate(120deg);
.sk-circle .sk-circle6
  transform: rotate(150deg);
.sk-circle .sk-circle7
  transform: rotate(180deg);
.sk-circle .sk-circle8
  transform: rotate(210deg);
.sk-circle .sk-circle9
  transform: rotate(240deg);
.sk-circle .sk-circle10
  transform: rotate(270deg);
.sk-circle .sk-circle11
  transform: rotate(300deg);
.sk-circle .sk-circle12
  transform: rotate(330deg);
.sk-circle .sk-circle2:before
  animation-delay: -1.1s;
.sk-circle .sk-circle3:before
  animation-delay: -1s;
.sk-circle .sk-circle4:before
  animation-delay: -0.9s;
.sk-circle .sk-circle5:before
  animation-delay: -0.8s;
.sk-circle .sk-circle6:before
  animation-delay: -0.7s;
.sk-circle .sk-circle7:before
  animation-delay: -0.6s;
.sk-circle .sk-circle8:before
  animation-delay: -0.5s;
.sk-circle .sk-circle9:before
  animation-delay: -0.4s;
.sk-circle .sk-circle10:before
  animation-delay: -0.3s;
.sk-circle .sk-circle11:before
  animation-delay: -0.2s;
.sk-circle .sk-circle12:before
  animation-delay: -0.1s;

@keyframes sk-circleBounceDelay
  0%, 80%, 100%
    transform scale(0)
  40%
    transform scale(1)