CSS3 loading加載動畫

先介紹3種loading效果，喜歡的話收藏一下吧~

一薯嗤、loading效果1

loading1.gif

<div class="loading">
    <h2>wait for loading</h2>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

body{
    background:#222;
}
.loading {
    width:200px;
    height:200px;
    text-align: center;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

.loading h2 {
    color: #ccc;
    margin: 0;
    font: .8em verdana;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.loading span {
    display: inline-block;
    vertical-align: middle;
    width: .6em;
    height: .6em;
    margin: .18em;
    background: #007DB6;
    border-radius: .6em;
    animation: loading 1s infinite alternate;
}

.loading span:nth-of-type(2) {
    background: #008FB2;
    animation-delay: 0.2s;
}

.loading span:nth-of-type(3) {
    background: #009B9E;
    animation-delay: 0.4s;
}

.loading span:nth-of-type(4) {
    background: #00A77D;
    animation-delay: 0.6s;
}

.loading span:nth-of-type(5) {
    background: #00B247;
    animation-delay: 0.8s;
}

.loading span:nth-of-type(6) {
    background: #5AB027;
    animation-delay: 1.0s;
}

.loading span:nth-of-type(7) {
    background: #A0B61E;
    animation-delay: 1.2s;
}

@keyframes loading {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

二顽爹、loading效果2

loading2.gif

<div class="loader">
    <p></p>
</div>

.loader {
    width: 100px;
    height: 100px;
    border: 6px solid;
    border-top-color: hsl(154, 100%, 31%);
    border-left-color: hsl(216, 87%, 52%);
    border-bottom-color: hsl(8, 66%, 50%);
    border-right-color: hsl(42, 100%, 51%);
    border-radius: 50%;
    transform: rotate(45deg);
    
    position: absolute;
    margin: auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

p {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: linear-gradient(90deg, hsla(212, 67%, 36%, 0) 0%, hsla(207, 69%, 51%, 0)76%, hsla(0, 0%, 100%, 1)85%, hsla(0, 0%, 100%, 1)100%);
    border: 8px solid transparent;
    background-origin:border-box;
    border-radius: 50%;
    box-shadow: inset -999px 0 0 transparent;
    /* transform: translate(-8px, 55px); */
    transform: translate(-8px, -24px);
    animation: loading 1s linear infinite;

}

@keyframes loading {
    0% {
        /* transform: translate(-9px, -25px) rotate(0deg); */
        transform: translate(-8px, -24px) rotate(0deg);
    }

    100% {
        transform: translate(-8px, -24px) rotate(360deg);
    }

}

三、loading效果3

loading3.gif

<div class="loader">
    <span>L</span>
    <span>O</span>
    <span>A</span>
    <span>D</span>
    <span>I</span>
    <span>N</span>
    <span>G</span>
    <div class="covers">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

* {
    box-sizing: border-box;
    overflow: hidden;
}
body{
    padding-top:10em;
    text-align:center;
}

.loader {
    position: relative;
    margin: auto;
    width: 350px;
    color: white;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 250%;
    background: linear-gradient(180deg, #222 0, #444 100%);
    box-shadow: inset 0 5px 20px black;
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}

.loader:after {
    content: "";
    display: table;
    clear: both;
}

.loader span {
    float: left;
    height: 100px;
    line-height: 120px;
    width: 50px;
}

.loader>span {
    border-left: 1px solid #444;
    border-right: 1px solid #222;
}

.loader .covers {
    position: absolute;
    height: 100%;
    width: 100%;
}

.covers span {
    background: linear-gradient(180deg, white 0, #ddd 100%);
    animation: up 2s infinite;
}

@keyframes up {
    0% {
        margin-bottom: 0;
    }

    16% {
        margin-bottom: 100%;
        height: 20px;
    }

    50% {
        margin-bottom: 0;
    }

    100% {
        margin-bottom: 0;
    }
}

.covers span:nth-child(2) {
    animation-delay: .142857s;
}

.covers span:nth-child(3) {
    animation-delay: .285714s;
}

.covers span:nth-child(4) {
    animation-delay: .428571s;
}

.covers span:nth-child(5) {
    animation-delay: .571428s;
}

.covers span:nth-child(6) {
    animation-delay: .714285s;
}

.covers span:nth-child(7) {
    animation-delay: .857142s;
}