<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Loading Animation Loop</title>
<style type="text/css">
.content {width:800px; margin:0 auto; padding-top:50px;}
/* STOP ANIMATION */
.stop {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
}
/* Loading Circle */
body{
background:#ccc;
}
.loading{
width:30px;
border:5px solid #fd7300;
opacity:.9;
border-radius:25px;
height:30px;
}
.ball1 {
border:5px solid #fcd702;
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-bottom:5px solid rgba(0,0,0,0);
border-radius:50px;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-5px;
left:-5px;
-moz-animation:spinoff .5s infinite linear;
-webkit-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); }
}
</style>
</head>
<body>
<!-- LOOP LOADER -->
<div class="content">
<div class="loading">
<div class="ball1"></div>
</div>
</div>
<!-- END LOOP LOADER -->
</body>
</html>
loading