hexo-theme-volantis/source/css/_style/_plugins/pjaxanimate.styl

Elegant and powerful theme for Hexo.

// nprogress
/* Make clicks pass-through */
#nprogress
  pointer-events: none

#nprogress .bar
  background: $color-theme
  position: fixed
  z-index: 3000
  top: 0
  left: 0
  width: 100%
  height: 100%

/* Fancy blur effect */
#nprogress .peg
  display: block
  position: absolute
  right: 0px
  width: 100px
  height: 100%
  opacity: 1.0
  -webkit-transform: rotate(3deg) translate(0px, -4px)
  -ms-transform: rotate(3deg) translate(0px, -4px)
  transform: rotate(3deg) translate(0px, -4px)

/* Remove these to get rid of the spinner */
#nprogress .spinner
  display: block
  position: fixed
  z-index: 3000
  top: 15px
  right: 15px


#nprogress .spinner-icon
  width: 18px
  height: 18px
  box-sizing: border-box
  border: solid 2px transparent
  border-top-color: #29d
  border-left-color: #29d
  border-radius: 50%

  -webkit-animation: nprogress-spinner 400ms linear infinite
  animation: nprogress-spinner 400ms linear infinite


.nprogress-custom-parent
  overflow: hidden
  position: relative

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar
  position: absolute


@-webkit-keyframes nprogress-spinner
  0%
    -webkit-transform: rotate(0deg)
  100%
    -webkit-transform: rotate(360deg)

@keyframes nprogress-spinner
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)



#loading-bar-wrapper
  position: fixed
  width: 100px
  top: 8px
  left: 50%
  transform: translateX(-50%)
  height: 8px
  border-radius: 8px
  z-index: 2000
  background: transparent
  &.nprogress-custom-parent
    background: var(--color-card)
    box-shadow: $boxshadow-card

// circle
.loading-circle
  display none
  height 100%
  width 100%
  position fixed
  top 0
  left 0
  z-index 999999
  background-color rgba(250,250,250,.9)
  img
    width 280px
    height 210px
    position relative
    top 45%
    left 50%
    margin-left -140px
    margin-top -105px

#loader-circle
  display block
  position relative
  left 50%
  top 50%
  width 150px
  height 150px
  margin -75px 0 0 -75px
  border-radius 50%
  border 3px solid transparent
  border-top-color #ff5a5a
  -webkit-animation spin 1s linear infinite
  animation spin 1s linear infinite
  &:before
    content ""
    position absolute
    top 5px
    left 5px
    right 5px
    bottom 5px
    border-radius 50%
    border 3px solid transparent
    border-top-color #5af33f
    -webkit-animation spin 3s linear infinite
    animation spin 3s linear infinite
  &:after
    content ""
    position absolute
    top 15px
    left 15px
    right 15px
    bottom 15px
    border-radius 50%
    border 3px solid transparent
    border-top-color #6dc9ff
    -webkit-animation spin 2s linear infinite
    animation spin 2s linear infinite

@-webkit-keyframes spin
  0%
    -webkit-transform: rotate(0deg)
    -ms-transform: rotate(0deg)
    transform: rotate(0deg)
  100%
    -webkit-transform: rotate(360deg)
    -ms-transform: rotate(360deg)
    transform: rotate(360deg)
@keyframes spin
  0%
    -webkit-transform: rotate(0deg)
    -ms-transform: rotate(0deg)
    transform: rotate(0deg)
  100%
    -webkit-transform: rotate(360deg)
    -ms-transform: rotate(360deg)
    transform: rotate(360deg)