css3实现loader加载指示器特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3实现loader加载指示器特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3实现loader加载指示器特效</title>
<link rel="stylesheet" href="css/main.min.css">
<link rel="stylesheet" href="dist/css-loader.css">

</head>
<body>
<div id="loader"></div>
<div class="htmleaf-container">
	<div class="container">
		<div class="row row--flex">

		  <div class="box box--full">
			<h3 class="box__title">Default</h3>
			<div class="box__item">
			  <button id="loader-default" class="button">default</button>  
			</div>
			<div class="box__item">
			  <button id="loader-default-half" class="button">half</button>  
			</div>
			<div class="box__item">
			  <button id="loader-default-inverse" class="button">inverse</button>
			</div>
			<div class="box__item">
			  <button id="loader-default-text" class="button">w/ text</button>
			</div>
			<div class="box__item">
			  <button id="loader-default-blink" class="button">blink</button>
			</div>
			<div class="box__item">
			  <input type="text" id="custom-text" class="input" placeholder="custom text here">
			  <button id="loader-default-custom-text" class="button">custom text</button>
			</div>
		  </div>

		  <div class="box box--full">
			<h3 class="box__title">Bar</h3>
			<div class="box__item">
			  <button id="loader-bar" class="button">default</button>
			</div>
			<div class="box__item">
			  <button id="loader-bar-rounded" class="button">rounded</button>
			</div>
			<div class="box__item">
			  <button id="loader-bar-text" class="button">w/ text</button>
			</div>
			<div class="box__item">
			  <button id="loader-bar-blink" class="button">blink</button>
			</div>
			<div class="box__item">
			  <input type="text" id="bar-custom-text" class="input" placeholder="custom text here">
			  <button id="loader-bar-custom-text" class="button">custom text</button>
			</div>
		  </div>

		  <div class="box">
			<h3 class="box__title">Border</h3>
			<div class="box__item">
			  <button id="loader-border" class="button">default</button>
			</div>
			<div class="box__item">
			  <button id="loader-border-text" class="button">w/ text</button>
			</div>
			<div class="box__item">
			  <button id="loader-border-blink" class="button">blink</button>
			</div>
			<div class="box__item">
			  <input type="text" id="border-custom-text" class="input" placeholder="custom text here">
			  <button id="loader-border-custom-text" class="button">custom-text</button>
			</div>
		  </div>

		  <div class="box">
			<h3 class="box__title">Double</h3>
			<div class="box__item">
			  <button id="loader-double" class="button">default</button>
			</div>
		  </div>

		  <div class="box">
			<h3 class="box__title">clock</h3>
			<div class="box__item">
			  <button id="loader-clock" class="button">default</button>
			</div>
		  </div>

		  <div class="box">
			<h3 class="box__title">Ball</h3>
			<div class="box__item">
			  <button id="loader-ball" class="button">default</button>
			</div>
			<div class="box__item">
			  <button id="loader-ball-shadow" class="button">shadow</button>
			</div>
		  </div>

		  <div class="box">
			<h3 class="box__title">Smartphone</h3>
			<div class="box__item">
			  <button id="loader-smartphone" class="button">default</button>
			</div>
			<div class="box__item">
			  <button id="loader-smartphone-text" class="button">w/ text</button>
			</div>
			<div class="box__item">
			  <input type="text" id="smartphone-custom-text" class="input" placeholder="custom text here">
			  <button id="loader-smartphone-custom-text" class="button">custom text</button>
			</div>
		  </div>
		</div>
	  </div>
</div>
<script src="js/main.min.js"></script>
</body>
</html>

JS代码(main.min.js):

(function(){
	var loader=document.getElementById("loader");
	var config=[{
	button:document.getElementById("loader-default"),className:"loader-default"}
,{
	button:document.getElementById("loader-default-half"),className:"loader-default",attributes:[{
	attribute:"half"}
]}
,{
	button:document.getElementById("loader-default-blink"),className:"loader-default",attributes:[{
	attribute:"blink"}
,{
	attribute:"data-text"}
]}
,{
	button:document.getElementById("loader-default-inverse"),className:"loader-default",attributes:[{
	attribute:"inverse"}
]}
,{
	button:document.getElementById("loader-default-text"),className:"loader-default",attributes:[{
	attribute:"data-text"}
]}
,{
	button:document.getElementById("loader-default-custom-text"),className:"loader-default",attributes:[{
	attribute:"data-text",value:document.getElementById("custom-text")}
]}
,{
	button:document.getElementById("loader-double"),className:"loader-double"}
,{
	button:document.getElementById("loader-bar"),className:"loader-bar"}
,{
	button:document.getElementById("loader-bar-rounded"),className:"loader-bar",attributes:[{
	attribute:"rounded"}
]}
,{
	button:document.getElementById("loader-bar-text"),className:"loader-bar",attributes:[{
	attribute:"data-text"}
]}
,{
	button:document.getElementById("loader-bar-blink"),className:"loader-bar",attributes:[{
	attribute:"blink"}
,{
	attribute:"data-text"}
]}
,{
	button:document.getElementById("loader-bar-custom-text"),className:"loader-bar",attributes:[{
	attribute:"data-text",value:document.getElementById("bar-custom-text")}
]}
,{
	button:document.getElementById("loader-border"),className:"loader-border"}
,{
	button:document.getElementById("loader-border-text"),className:"loader-border",attributes:[{
	attribute:"data-text"}
]}
,{
	button:document.getElementById("loader-border-custom-text"),className:"loader-border",attributes:[{
	attribute:"data-text",value:document.getElementById("border-custom-text")}
]}
,{
	button:document.getElementById("loader-border-blink"),className:"loader-border",attributes:[{
	attribute:"data-text"}
,{
	attribute:"blink"}
]}
,{
	button:document.getElementById("loader-ball"),className:"loader-ball"}
,{
	button:document.getElementById("loader-ball-shadow"),className:"loader-ball",attributes:[{
	attribute:"shadow"}
]}
,{
	button:document.getElementById("loader-smartphone"),className:"loader-smartphone"}
,{
	button:document.getElementById("loader-smartphone-text"),className:"loader-smartphone",attributes:[{
	attribute:"data-screen"}
]}
,{
	button:document.getElementById("loader-smartphone-custom-text"),className:"loader-smartphone",attributes:[{
	attribute:"data-screen",value:document.getElementById("smartphone-custom-text")}
]}
,{
	button:document.getElementById("loader-clock"),className:"loader-clock"}
];
	var timer;
	loader.addEventListener("click",function(){
	for(var i=this.attributes.length-1;
	i>=0;
	i--){
	if(this.attributes[i].name!=="id"){
	this.removeAttribute(this.attributes[i].name)}
}
clearTimeout(timer)}
);
	for(var i=0;
	i<config.length;
	i++){
	(function(i){
	config[i]["button"].addEventListener("click",function(){
	if(config[i]["attributes"]){
	for(var j=0;
	j<config[i]["attributes"].length;
	j++){
	var tempAttribute=config[i]["attributes"][j];
	var tempValue=tempAttribute["value"]?tempAttribute["value"].value:"";
	loader.setAttribute(tempAttribute["attribute"],tempValue)}
}
loader.classList.add("loader",config[i]["className"],"is-active");
	hideLoader(config[i]["className"],config[i]["attributes"]?config[i]["attributes"]:[])}
)}
)(i)}
function hideLoader(param,attr){
	timer=setTimeout(function(){
	loader.classList.remove("is-active",param,"loader");
	for(var k=0;
	k<attr.length;
	k++){
	loader.removeAttribute(attr[k]["attribute"])}
}
,5e3)}
if(window.location.hash){
	var loaderHash=window.location.hash.split("#/")[1];
	var event=document.createEvent("HTMLEvents");
	event.initEvent("click",true,false);
	document.getElementById(loaderHash).dispatchEvent(event);
	setTimeout(function(){
	history.pushState("",document.title,window.location.pathname)}
,2e3)}
}
)();

CSS代码(main.min.css):

.header__subtitle,.header__title{text-shadow:1px 1px 0 rgba(0,0,0,.2)}
*,:after,:before{margin:0;padding:0;list-style:none}
body{font-family:'Open Sans',sans-serif;font-weight:400;background-color:#fff;color:#444;font-size:16px}
.footer,.header{background-color:#1abc9c;color:#fff;text-align:center}
.container{padding-left:10px;padding-right:10px}
.footer{padding:20px;border-top:solid 15px #16a085;margin-top:25px}
.header{padding:50px 20px;border-bottom:solid 15px #16a085;margin-bottom:25px;position:relative}
.header__title{font-weight:700;font-size:54px;letter-spacing:-2px}
.header__title:after,.header__title:before{content:'';width:10px;height:10px;display:inline-block;border:5px solid #16a085;border-right-color:transparent;vertical-align:middle;border-radius:50%;animation:rotation 1s infinite linear}
.header__title:before{margin-right:10px}
.header__title:after{margin-left:10px;animation-duration:1.5s}
.header__subtitle{font-weight:300;font-size:24px}
@keyframes pulse{to{transform:scale(1.2)}
}
@keyframes rotation{to{transform:rotate(359deg)}
}
.heart{color:#e74c3c;display:inline-block;vertical-align:bottom;font-size:22px;animation:pulse .5s linear infinite alternate}
.heart--small{font-size:16px;vertical-align:middle}
.row{max-width:850px;width:100%;margin:0 auto}
.row--space{margin-bottom:25px}
.row--flex{display:flex;flex-flow:row wrap;justify-content:flex-start}
.box__item,.button,.input{display:inline-block}
.box{padding:15px;background-color:#f5f5f5;border:1px solid #dedede;margin:10px 10px 10px 0}
.box--full{width:100%;margin-right:0}
.box__item{margin:8px 0}
.box__title,.title,p{margin-bottom:15px}
.box__title{font-size:18px;color:#666}
.button{border:none;background-color:#1abc9c;color:#fff;font-size:14px;padding:10px 20px;border-radius:5px;text-shadow:1px 1px 0 rgba(0,0,0,.25);box-shadow:0 5px 0 0 #16a085;transition:background .3s ease}
.button:focus,.button:hover{background-color:#049372;outline:0}
.button:active{transform:translateY(5px);box-shadow:none}
.input{padding:8px;max-width:90px;transition:all .3s ease;border:1px solid #eee}
.input:focus{border-color:#ccc}
a{color:#16a085}
a:hover{text-decoration:none}
.text-yellow{color:#f1c40f}
.text-white{color:#fff}
@media screen and (max-width:550px){.header{padding:25px 10px}
.header__title{font-size:32px;letter-spacing:0;margin-bottom:15px}
.header__subtitle{font-size:20px;line-height:1.4}
}

附件:下载该文件资源,减少时间成本(增值服务)