|
|
Copied To Clipboard!
<html>
<head>
<title>Pure CSS3 Loading Animations</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
/* Begin Pure CSS3 Loading Spinner Animations */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);}
#content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;}
pre.prettyprint {padding:5px;width:99%;white-space:pre-wrap;font-family:Verdana;font-size:12px;color:#111;background-color:#f2f2f2;border:2px solid #ddd;
box-shadow:0 0 6px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 0 6px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0 0 6px rgba(0, 0, 0, 0.5);}
</style>
<style type="text/css">
/* Begin Pure CSS Loading Spinner Animations */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://www.SnapBuilder.com Free Public Codes Library == */
.load1 {
height:5px;
width:40px;
background-color:#000000;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.5s linear 0s infinite;
-moz-animation:bganim 0.5s linear 0s infinite;
-webkit-animation:bganim 0.5s linear 0s infinite;
}
.load2 {
/* This is a CSS half cicle */
height:20px;
width:40px;
border-radius:0 0 90px 90px;
-moz-border-radius:0 0 90px 90px;
-webkit-border-radius:0 0 90px 90px;
background:gray;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.5s linear 0s infinite;
-moz-animation:bganim 0.5s linear 0s infinite;
-webkit-animation:bganim 0.5s linear 0s infinite;
}
.load3 {
width:0;
height:0;
border-right:20px solid #3399ff;
border-top:20px solid red;
border-left:20px solid yellow;
border-bottom:20px solid green;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.6s linear 0s infinite;
-moz-animation:bganim 0.6s linear 0s infinite;
-webkit-animation:bganim 0.6s linear 0s infinite;
}
.load4 {
width:0;
height:0;
border-right:20px solid #444;
border-top:20px solid #777;
border-left:20px solid #aaa;
border-bottom:20px solid #eee;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.6s ease 0s infinite;
-moz-animation:bganim 0.6s ease 0s infinite;
-webkit-animation:bganim 0.6s ease 0s infinite;
}
.load5 {
width:0;
height:0;
border-right:20px solid #fff;
border-top:20px solid #000;
border-left:20px solid #fff;
border-bottom:20px solid #000;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.8s linear 0s infinite;
-moz-animation:bganim 0.8s linear 0s infinite;
-webkit-animation:bganim 0.8s linear 0s infinite;
}
@keyframes bganim {from {transform:rotate(0deg);} to {transform:rotate(360deg);}
}
@-moz-keyframes bganim {from {-moz-transform:rotate(0deg);} to {-moz-transform:rotate(360deg);}
}
@-webkit-keyframes bganim {from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);}
</style>
</head>
<body>
<div id="content">
<div class="loading"></div>
For this tutorial, we are going to create pure CSS3 spinning animations; we will not use any javascript or jQuery code nor use libraries, images ...<br />
<table style="margin-left:auto;margin-right:auto;">
<tbody>
<tr>
<td style="padding:20px"><div class="load1"></div></td>
<td style="padding:20px"><div class="load2"></div></td>
<td style="padding:20px"><div class="load3"></div></td>
<td style="padding:20px"><div class="load4"></div></td>
<td style="padding:20px"><div class="load5"></div></td>
</tr>
</tbody>
</table>
<h2>Stylesheet :</h2>
in the pages HEAD section just add the <style type="text/css"> with
the "<strong>load {</strong>" codes you want the spinner animation to show
as, that's all :<h2>HTML Markup :</h2>
in the pages Html Markup just add a <div> element with a class name "<strong>load#</strong>" where you want the spinner animation to
appear, that's all :<br />
<pre class="prettyprint">
<div class="load#"></div></pre>
<h2>
The CSS :</h2>
the following CSS code will render this spinner loading animation :
<div style="margin-top:5px;"><div class="load3"></div></div>
<h3>
CSS Part 1 :</h3>
In the first part we will define our spinner style, with CSS3 we can create many shapes, like lines, squares, pies, circles but also we can generate textures, stripes and other complex patterns.<br />
<br />
In this case we will use the div borders and assign a radius value equal to the width of each border, and we'll obtain a circle divided by 4. We can color each border to have a nice spinning wheel :<br />
<pre class="prettyprint">
<style>
/* Begin Pure CSS Loading Spinner Animations */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://www.SnapBuilder.com Free Public Codes Library == */
.load3 {
width:0;
height:0;
border-right:20px solid #3399ff;
border-top:20px solid red;
border-left:20px solid yellow;
border-bottom:20px solid green;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.6s linear 0s infinite;
-moz-animation:bganim 0.6s linear 0s infinite;
-webkit-animation:bganim 0.6s linear 0s infinite;
}
</style>
</pre>
<h3>
CSS Part 2 :</h3>
The second part is the animation; we have to rotate our div indefinitely, this can be done by using the CSS3 animations to perform a 360 rotation. We can control the direction, speed and the movement style (linear, ease, ...) :<br />
<pre class="prettyprint">
/* Animate and rotate the spinner using CSS3 Animations */
animation: bganim 0.6s linear 0s infinite;
/* moz: Vendor prefixe for Mozilla Firefox */
-moz-animation:bganim 0.6s linear 0s infinite;
/* webkit:Vendor prefixe for Google Chrome, Chromium, Apple Safari... */
-webkit-animation:bganim 0.6s linear 0s infinite;
}
@keyframes bganim {
/* Rotate the div 360 */
from { transform:rotate(0deg); } to { transform:rotate(360deg); }
}
@-moz-keyframes bganim {
from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes bganim {
from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); }
}
</pre>
As you noticed each line is repeated with "<strong>-moz</strong>" and "<strong>-webkit</strong>" prefixes, this is for compatibility reasons for browsers like Mozilla, chrome, safari ...<br />
<br />
To change the animation speed change the second part in the "<strong>animation:</strong>" lines (for example 0.5s : half a second) and to inverse the rotation direction, just switch the "<strong>transform:rotate</strong>" values : "<strong>0deg</strong>" and "<strong>360deg</strong>". Also change linear to ease to have an animation style like the forth spinner in the above running example.<br />
<br />
That's all !!!
<h2>
Other Spinners :</h2>
Replace the Part1 CSS code with the following CSS to create the correspondent spinner :<br />
<br />
<br />
<div class="load1"></div>
<br />
<pre class="prettyprint">
<style>
/* Begin Pure CSS3 Loading Spinner Animations */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://www.SnapBuilder.com Free Public Codes Library == */
.load2 {
/* This is a CSS half cicle */
height:20px;
width:40px;
border-radius:0 0 90px 90px;
-moz-border-radius:0 0 90px 90px;
-webkit-border-radius:0 0 90px 90px;
background:gray;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.5s linear 0s infinite;
-moz-animation:bganim 0.5s linear 0s infinite;
-webkit-animation:bganim 0.5s linear 0s infinite;
}
</style><style>
/* Begin Pure CSS3 Loading Spinner Animations */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://www.SnapBuilder.com Free Public Codes Library == */
.load1 {
height:5px;
width:40px;
background-color:#000000;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.5s linear 0s infinite;
-moz-animation:bganim 0.5s linear 0s infinite;
-webkit-animation:bganim 0.5s linear 0s infinite;
}
</style>
</pre>
<br />
<div class="load2"></div>
<pre class="prettyprint">
<style>
/* Begin Pure CSS3 Loading Spinner Animations */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://www.SnapBuilder.com Free Public Codes Library == */
.load2 {
/* This is a CSS half cicle */
height:20px;
width:40px;
border-radius:0 0 90px 90px;
-moz-border-radius:0 0 90px 90px;
-webkit-border-radius:0 0 90px 90px;
background:gray;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.5s linear 0s infinite;
-moz-animation:bganim 0.5s linear 0s infinite;
-webkit-animation:bganim 0.5s linear 0s infinite;
}
</style>
</pre>
<div class="load4">
</div>
<pre class="prettyprint">
<style>
/* Begin Pure CSS3 Loading Spinner Animations */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://www.SnapBuilder.com Free Public Codes Library == */
.load4 {
width:0;
height:0;
border-right:20px solid #444;
border-top:20px solid #777;
border-left:20px solid #aaa;
border-bottom:20px solid #eee;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.6s ease 0s infinite;
-moz-animation:bganim 0.6s ease 0s infinite;
-webkit-animation:bganim 0.6s ease 0s infinite;
}
</style>
</pre>
<div class="load5">
</div>
<pre class="prettyprint">
<style>
/* Begin Pure CSS3 Loading Spinner Animations */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://www.SnapBuilder.com Free Public Codes Library == */
.load5 {
width:0;
height:0;
border-right:20px solid #fff;
border-top:20px solid #000;
border-left:20px solid #fff;
border-bottom:20px solid #000;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.8s linear 0s infinite;
-moz-animation:bganim 0.8s linear 0s infinite;
-webkit-animation:bganim 0.8s linear 0s infinite;
}
@keyframes bganim {from {transform:rotate(0deg);} to {transform:rotate(360deg);}
}
@-moz-keyframes bganim {from {-moz-transform:rotate(0deg);} to {-moz-transform:rotate(360deg);}
}
@-webkit-keyframes bganim {from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);}
</style>
</pre>
<br /><br />
<div id="code">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_196.html">Pure CSS3 Loading Spinner Animations Code Snippet</a> page. ]
</div>
</div>
</body>
</html>
|
