html页面加载前的动画,写一个页面加载完成前的一个加载动画

类似于这种加载动画有很多，尤其是在手机端，接下来我就说下这个东西怎么实现。

image.png

HTML代码：

CSS代码：

/*Preloader*/

.preloader {

position: fixed;

top: 0;

left: 0;

background-color: #FFFFFF;

height: 100vh;

width: 100%;

z-index: 9999;

}

.preloader:before, .preloader:after {

content: '';

border: 5px solid #D19A04;

width: 80px;

height: 80px;

border-radius: 500px;

position: absolute;

top: 50%;

left: 50%;

margin: -40px 0 0 -40px;

}

.preloader:before {

-webkit-animation: pulse-outer 0.8s ease-in infinite;

-moz-animation: pulse-outer 0.8s ease-in infinite;

animation: pulse-outer 0.8s ease-in infinite;

}

.preloader:after {

-webkit-animation: pulse-inner 0.8s linear infinite;

-moz-animation: pulse-inner 0.8s linear infinite;

animation: pulse-inner 0.8s linear infinite;

}

@-webkit-keyframes pulse-outer {

0% {

opacity: 1;

filter: alpha(opacity=100);

}

50% {

opacity: 0.5;

filter: alpha(opacity=50);

}

100% {

opacity: 0;

filter: alpha(opacity=0);

}

}

@-moz-keyframes pulse-outer {

0% {

opacity: 1;

filter: alpha(opacity=100);

}

50% {

opacity: 0.5;

filter: alpha(opacity=50);

}

100% {

opacity: 0;

filter: alpha(opacity=0);

}

}

@keyframes pulse-outer {

0% {

opacity: 1;

filter: alpha(opacity=100);

}

50% {

opacity: 0.5;

filter: alpha(opacity=50);

}

100% {

opacity: 0;

filter: alpha(opacity=0);

}

}

@-webkit-keyframes pulse-inner {

0% {

-webkit-transform: scale(0);

opacity: 0;

filter: alpha(opacity=0);

}

100% {

-webkit-transform: scale(1);

opacity: 1;

filter: alpha(opacity=100);

}

}

@-moz-keyframes pulse-inner {

0% {

-moz-transform: scale(0);

opacity: 0;

filter: alpha(opacity=0);

}

100% {

-moz-transform: scale(1);

opacity: 1;

filter: alpha(opacity=100);

}

}

@keyframes pulse-inner {

0% {

-webkit-transform: scale(0);

-moz-transform: scale(0);

-ms-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

opacity: 0;

filter: alpha(opacity=0);

}

100% {

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale(1);

-o-transform: scale(1);

transform: scale(1);

opacity: 1;

filter: alpha(opacity=100);

}

}

JS代码：

(function( $ ){

'use strict';

// Preloader

jQuery(window).load(function() {

jQuery(".preloader").fadeOut("slow");

});

})(window.jQuery);

下面是jQuery官网的加载动画，不错啊

image.png

HTML代码：


CSS代码：

.main-loading {

position: fixed;

left: 0;

top: 0;

right: 0;

bottom: 0;

width: 100%;

height: 100%;

background: #ccc;

z-index: 99

}

.main-loading .loading-con {

position: absolute;

left: 50%;

top: 50%;

margin-left: -40px;

margin-top: -40px;

width: 96px;

height: 96px

}

.main-loading .loading-con img {

position: absolute;

top: 8px;

left: 8px;

width: 80px;

height: 80px;

-webkit-border-radius: 50%;

border-radius: 50%

}

.main-loading .loading-circle {

width: 80px;

height: 80px;

border-top: 8px solid #11994b;

border-right: 8px solid #f2a808;

border-bottom: 8px solid #2399e7;

border-left: 8px solid #c0392b;

-webkit-border-radius: 50%;

border-radius: 50%;

-webkit-animation: spin 1s infinite linear;

-moz-animation: spin 1s infinite linear;

animation: spin 1s infinite linear

}

@keyframes spin {

0% {

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

transform: rotate(0deg)

}

100% {

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

transform: rotate(360deg)

}

}

@-moz-keyframes spin {

0% {

-moz-transform: rotate(0deg)

}

100% {

-moz-transform: rotate(360deg)

}

}

@-webkit-keyframes spin {

0% {

-webkit-transform: rotate(0deg)

}

100% {

-webkit-transform: rotate(360deg)

}

}

JS代码：

$("#main-loading").delay(500).fadeOut("normal",function(){$("html,body").removeClass("loading-process")})}

这些就可以实现这个效果了，我之前做的项目中用到一些动画效果必须等图片加载完成才可以完美显示，所以我加了这个加载动画。感兴趣的朋友可以试试。