实现圆圈状CSS3的酷炫加载状态

这是一个非常帅的加载状态，可在网站页面加载时显示，加载后淡出。

蓝色小圈加载样式

1. 将 CSS 样式表代码插入 Style.css 主题文件中

#circle {
        background-color: rgba(0,0,0,0);
        border:5px solid rgba(0,183,229,0.9);
        opacity:.9;
        border-top:5px solid rgba(0,0,0,0);
        border-left:5px solid rgba(0,0,0,0);
        border-radius:50px;
        box-shadow: 0 0 35px #2187e7;
        width:30px;
        height:30px;
        margin:0 auto;
        -moz-animation:spin .5s infinite linear;
        -webkit-animation:spin .5s infinite linear;
        -o-animation:spin .5s infinite linear;
        -ms-animation:spin .5s infinite linear;
        position:fixed;
        left:20px;
        bottom:20px;
}
#circle1 {
        background-color: rgba(0,0,0,0);
        border:5px solid rgba(0,183,229,0.9);
        opacity:.9;
        border-top:5px solid rgba(0,0,0,0);
        border-left:5px solid rgba(0,0,0,0);
        border-radius:50px;
        box-shadow: 0 0 15px #2187e7;
        width:10px;
        height:10px;
        margin:0 auto;
        position:fixed;
        left:30px;
        bottom:30px;
        -moz-animation:spinoff .5s infinite linear;
        -webkit-animation:spinoff .5s infinite linear;
        -o-animation:spinoff .5s infinite linear;
        -ms-animation:spinoff .5s infinite linear;
}
@-moz-keyframes spin {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(-360deg); }
}
@-o-keyframes spin {
        0% { -o-transform:rotate(0deg); }
        100% { -o-transform:rotate(360deg); }
}
@-o-keyframes spinoff {
        0% { -o-transform:rotate(0deg); }
        100% { -o-transform:rotate(-360deg); }
}
@-ms-keyframes spin {
        0% { -ms-transform:rotate(0deg); }
        100% { -ms-transform:rotate(360deg); }
}
@-ms-keyframes spinoff {
        0% { -ms-transform:rotate(0deg); }
        100% { -ms-transform:rotate(-360deg); }
}

2. 在 header.php 中加入

<div id="circle"></div> <div id="circle1" ></div>

3. 在 footer.php 中加入

<script type="text/javascript">
$(window).load(function() {
$("#circle").fadeOut(500);
$("#circle1").fadeOut(700);
});
</script>

注：可别忘了加载 jQuery 库哦！

黑 / 蓝色大圈加载样式

1. 将 CSS 样式表代码插入 Style.css 主题文件中（若需实现蓝色大圈效果，请自行修改以下代码，蓝白色应该搭配 rgba(0,183,229) 与 #2187e7）

#circle {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(10,10,10,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #808080;
    width:50px;
    height:50px;
        margin:0 auto;
    position:fixed;
        left:30px;
        bottom:30px;
    -moz-animation:spinPulse 1s infinite ease-in-out;
    -webkit-animation:spinPulse 1s infinite ease-in-out;
    -o-animation:spinPulse 1s infinite ease-in-out;
    -ms-animation:spinPulse 1s infinite ease-in-out;

}
#circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(20,20,20,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #202020;
    width:30px;
    height:30px;
        margin:0 auto;
        position:fixed;
        left:40px;
        bottom:40px;
    -moz-animation:spinoffPulse 1s infinite linear;
    -webkit-animation:spinoffPulse 1s infinite linear;
    -o-animation:spinoffPulse 1s infinite linear;
    -ms-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}
@-o-keyframes spinPulse {
    0% { -o-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
    50% { -o-transform:rotate(145deg); opacity:1;}
    100% { -o-transform:rotate(-320deg); opacity:0; }
}
@-o-keyframes spinoffPulse {
    0% { -o-transform:rotate(0deg); }
    100% { -o-transform:rotate(360deg); }
}
@-ms-keyframes spinPulse {
    0% { -ms-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
    50% { -ms-transform:rotate(145deg); opacity:1;}
    100% { -ms-transform:rotate(-320deg); opacity:0; }
}
@-ms-keyframes spinoffPulse {
    0% { -ms-transform:rotate(0deg); }
    100% { -ms-transform:rotate(360deg); }
}

2. 在 header.php 中加入

<div id="circle"></div> <div id="circle1" ></div>

3. 在 footer.php 中加入

<script type="text/javascript">
$(window).load(function() {
$("#circle").fadeOut(500);
$("#circle1").fadeOut(700);
});
</script>