text 预载

Posted 2021-05-01

// HTML
<div class="preloader"><div class="pulse"></div></div>

// JS
$(window).on('load', () => {
      setTimeout(function(){
         window.scrollTo(0, 0);
      }, 1);
      $('.preloader').delay(300).fadeOut('slow');
      $('body').css('overflow','visible');
   });
   
// SASS
body
  overflow: hidden
@mixin opacity($opacity)
  opacity: $opacity / 100
  filter: alpha(opacity=$opacity)

@keyframes pulse-outer
  0%
    @include opacity(100)
  50%
    @include opacity(50)
  100%
    @include opacity(0)
@keyframes pulse-inner
  0%
    @include opacity(0)
    transform: scale(0)
  100%
    @include opacity(100)
    transform: scale(1)

.preloader
  position: fixed
  top: 0
  right: 0
  left: 0
  bottom: 0
  z-index: 100
  background-color: $black
  .pulse
    position: relative
    left: 50%
    top: 50%
    margin-left: -40px
    margin-top: -40px
    &::before, &::after
      content: ''
      border: 5px solid #323232
      width: 80px
      height: 80px
      border-radius: 50%
      position: absolute
    &::before
      animation: pulse-outer .8s ease-in infinite
    &::after
      animation: pulse-inner .8s linear infinite