javascript 预加载器2

Posted 2021-05-04

.preloader {
	background: none no-repeat scroll center bottom #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	width: 100%;
	height: 100%;
	padding: 20px;
}

.preloader .content {
	width: 100%;
	height: 100%;
	position: relative;
}

.preloader .pr-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -132px 0 0 -132px;
}

.preloader .pr-wrap div {
	background: url('img/logo-large.png') no-repeat scroll 0 0 transparent;
	width: 264px;
	height: 264px;
	position: absolute;
	left: 0;
	top: 0;
	transition: all 0.8s ease 0s;
}

.preloader .pr-logo {
	opacity: .3;
	z-index: 9;
}

.preloader .pr-wrap .pr-logo-status {
	width: 0;
	z-index: 99;
}

.preloader.start .pr-logo-status {
	width: 264px;
}

.loader-border:before,
.loader-border:after,
.loader-border span:before,
.loader-border span:after {
	background: #000;
	display: block;
	content: "";
	position: absolute;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.loader-border:before,
.loader-border:after {
	animation-name: borderwidth;
	height: 3px;
	width: 0;
}

.loader-border:before {
	top: 0;
	left: 0;
}

.loader-border:after {
	top: auto;
	left: auto;
	bottom: 0;
	right: 0;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

.loader-border span:before,
.loader-border span:after {
	height: 0;
	width: 3px;
	animation-name: borderheight;
}

.loader-border span:before {
    top: 0;
    left: auto;
    right: 0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.loader-border span:after {
    top: auto;
    bottom: 0;
    left: 0;
    -webkit-animation-delay: 1.5s;
    animation-delay:  1.5s;
}

@-webkit-keyframes borderwidth {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes borderwidth {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@-webkit-keyframes borderheight{
  from {
    height: 0;
  }

  to {
    height: 100%;
  }
}

@keyframes borderheight{
  from {
    height: 0;
  }

  to {
    height: 100%;
  }
}

<div class="preloader">
	<div class="content">
		<div class="loader-border">
			<span></span>
		</div>

		<div class="pr-wrap">
			<div class="pr-logo"></div>

			<div class="pr-logo-status"></div>
		</div>
	</div>
</div>

jQuery(window).load(function() {
	jQuery('.preloader').addClass('start');
	jQuery('.preloader').delay(1000).fadeOut(1000);
});