@import "common/var.styl"
.g-loading__contain
  position relative
  position absolute
  width 100%
  height 100%
  top 0
  left 0
  display flex
  align-items center
  justify-content center
  flex-direction column
  section
    z-index 99
  .g-loading__text
    font-size $font-size
    color $loading-color
    z-index 99
    margin-top 15px
.g-loading__contain:after
  position absolute
  content ''
  width 100%
  height 100%
  top 0
  left 0
  background $loading-shadow-color
  opacity 0.5
  z-index 0

// g-double-bounce
.g-double-bounce
  width 40px
  height 40px
  position relative
  margin auto
  .g-child
    width 100%
    height 100%
    border-radius 50%
    background-color $loading-color
    opacity 0.6
    position absolute
    top 0
    left 0
    -webkit-animation g-double-bounce 2.0s infinite ease-in-out
    animation g-double-bounce 2.0s infinite ease-in-out
  .g-double-bounce-2
    -webkit-animation-delay -1.0s
    animation-delay -1.0s
@-webkit-keyframes g-double-bounce
  0%, 100%
    -webkit-transform scale(0)
    transform scale(0)
  50%
    -webkit-transform scale(1)
    transform scale(1)
@keyframes g-double-bounce
  0%, 100%
    -webkit-transform scale(0)
    transform scale(0)
  50%
    -webkit-transform scale(1)
    transform scale(1)


//g-wave
.g-wave
  width 60px
  height 30px
  margin auto
  text-align center
  font-size $font-size
  .g-rect
    background-color $loading-color
    height 100%
    width 5px
    display inline-block
    -webkit-animation g-wave-stretch-delay 1.2s infinite ease-in-out
    animation g-wave-stretch-delay 1.2s infinite ease-in-out
  .g-rect + .g-rect
    margin-left 5px
  .g-rect-1
    -webkit-animation-delay -1.2s
    animation-delay -1.2s
  .g-rect-2
    -webkit-animation-delay -1.1s
    animation-delay -1.1s
  .g-rect-3
    -webkit-animation-delay -1s
    animation-delay -1s
  .g-rect-4
    -webkit-animation-delay -0.9s
    animation-delay -0.9s
  .g-rect-5
    -webkit-animation-delay -0.8s
    animation-delay -0.8s
@-webkit-keyframes g-wave-stretch-delay
  0%, 40%, 100%
    -webkit-transform scaleY(0.4)
    transform scaleY(0.4)
  20%
    -webkit-transform scaleY(1)
    transform scaleY(1)
@keyframes g-wave-stretch-delay
  0%, 40%, 100%
    -webkit-transform scaleY(0.4)
    transform scaleY(0.4)
  20%
    -webkit-transform scaleY(1)
    transform scaleY(1)


//g-circle-bounce
.g-circle-bounce
  width 40px
  height 40px
  position relative
  margin auto
  .g-child
    width 100%
    height 100%
    position absolute
    left 0
    top 0
  .g-child:before
    content ''
    display block
    margin 0 auto
    width 15%
    height 15%
    background-color $loading-color
    border-radius 100%
    -webkit-animation g-circle-bounce-delay 1.2s infinite ease-in-out both
    animation g-circle-bounce-delay 1.2s infinite ease-in-out both
  .g-circle-2
    -webkit-transform rotate(30deg)
    transform rotate(30deg)
  .g-circle-3
    -webkit-transform rotate(60deg)
    transform rotate(60deg)
  .g-circle-4
    -webkit-transform rotate(90deg)
    transform rotate(90deg)
  .g-circle-5
    -webkit-transform rotate(120deg)
    transform rotate(120deg)
  .g-circle-6
    -webkit-transform rotate(150deg)
    transform rotate(150deg)
  .g-circle-7
    -webkit-transform rotate(180deg)
    transform rotate(180deg)
  .g-circle-8
    -webkit-transform rotate(210deg)
    transform rotate(210deg)
  .g-circle-9
    -webkit-transform rotate(240deg)
    transform rotate(240deg)
  .g-circle-10
    -webkit-transform rotate(270deg)
    transform rotate(270deg)
  .g-circle-11
    -webkit-transform rotate(300deg)
    transform rotate(300deg)
  .g-circle-12
    -webkit-transform rotate(330deg)
    transform rotate(330deg)
  .g-circle-2:before
    -webkit-animation-delay -1.1s
    animation-delay -1.1s
  .g-circle-3:before
    -webkit-animation-delay -1s
    animation-delay -1s
  .g-circle-4:before
    -webkit-animation-delay -0.9s
    animation-delay -0.9s
  .g-circle-5:before
    -webkit-animation-delay -0.8s
    animation-delay -0.8s
  .g-circle-6:before
    -webkit-animation-delay -0.7s
    animation-delay -0.7s
  .g-circle-7:before
    -webkit-animation-delay -0.6s
    animation-delay -0.6s
  .g-circle-8:before
    -webkit-animation-delay -0.5s
    animation-delay -0.5s
  .g-circle-9:before
    -webkit-animation-delay -0.4s
    animation-delay -0.4s
  .g-circle-10:before
    -webkit-animation-delay -0.3s
    animation-delay -0.3s
  .g-circle-11:before
    -webkit-animation-delay -0.2s
    animation-delay -0.2s
  .g-circle-12:before
    -webkit-animation-delay -0.1s
    animation-delay -0.1s
@-webkit-keyframes g-circle-bounce-delay
  0%, 80%, 100%
    -webkit-transform scale(0)
    transform scale(0)
  40%
    -webkit-transform scale(1)
    transform scale(1)
@keyframes g-circle-bounce-delay
  0%, 80%, 100%
    -webkit-transform scale(0)
    transform scale(0)
  40%
    -webkit-transform scale(1)
    transform scale(1)