<head>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
</head>
<body>
<div class="whole">
<div id="spinner">
<div id="upper"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="250px" height="250px" viewBox="0 0 141.479 141.479" enable-background="new 0 0 141.479 141.479"
   xml:space="preserve">
<path fill="#000000" d="M0,0v141.479h141.479V0H0z M60.33,25.836c1.543-1.94,3.476-3.053,5.301-3.053H75.85
  c0.685,0,1.385,0.157,2.073,0.455c1.147,0.496,2.264,1.386,3.228,2.598c1.2,1.51,2.313,3.749,2.477,6.144
  c0.055,0.798,0.004,1.614-0.184,2.426l-3.665,16.506c-0.138,0.678-0.286,1.358-0.449,2.03c-1.143,4.701-3.015,8.966-7.147,8.966
  H69.3c-4.569,0-6.372-5.21-7.488-10.481c-0.038-0.18-0.078-0.359-0.114-0.539l-3.662-16.494c-0.094-0.404-0.152-0.81-0.182-1.214
  C57.65,30.352,58.931,27.598,60.33,25.836z M34.394,83.447c-0.561,0.129-1.164,0.195-1.783,0.195c-4.867,0-9.826-3.934-9.826-7.793
  V65.631c0-3.86,4.958-7.793,9.823-7.793c0.621,0,1.226,0.067,1.799,0.2l16.506,3.665c5.425,1.104,10.996,2.874,10.996,7.597v2.882
  c0,4.725-5.571,6.495-11.021,7.602L34.394,83.447z M81.15,115.645c-1.543,1.939-3.475,3.051-5.301,3.051H65.632
  c-1.826,0-3.759-1.111-5.302-3.053c-1.6-2.014-3.043-5.322-2.292-8.568l3.665-16.506c1.104-5.424,2.873-10.994,7.597-10.994h2.882
  c4.725,0,6.494,5.57,7.602,11.02l3.664,16.493C84.194,110.323,82.751,113.631,81.15,115.645z M118.696,75.85
  c0,1.9-1.188,3.891-3.259,5.461c-1.955,1.482-4.348,2.332-6.563,2.332c-0.001,0,0,0-0.001,0c-0.62,0-1.225-0.066-1.798-0.199
  l-16.507-3.666c-5.424-1.102-10.995-2.871-10.995-7.596v-2.882c0-4.725,5.571-6.494,11.021-7.602l16.493-3.663
  c0.562-0.129,1.166-0.197,1.786-0.197c4.866,0,9.823,3.933,9.823,7.793V75.85z"/>
</svg>
</div>
  
<div id="lower"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="250px" height="250px" viewBox="0 0 141.479 141.479" enable-background="new 0 0 141.479 141.479"
   xml:space="preserve">
<circle fill="#FFFFFF" cx="70.74" cy="70.74" r="55.788"/>
<path fill="#DC911B" d="M62.551,27.601c-1.496,1.88-2.184,4.3-1.752,6.167l3.672,16.53c1.234,6.076,2.723,8.775,4.828,8.775h2.883
  c2.105,0,3.594-2.699,4.824-8.75l3.672-16.543c0.109-0.47,0.148-0.973,0.121-1.493c-0.08-1.561-0.748-3.275-1.867-4.685
  c-0.973-1.223-2.154-1.982-3.082-1.982H65.631C64.704,25.619,63.522,26.378,62.551,27.601z"/>
</svg>
</div>
</div>
<div id="texter">Hover me.</div>
</div>
</body>
body {
background-color: #000000;
margin: 0;
}

.whole {
position: absolute;
left: 50%;
top: 50%;
width: 250px;
height: 350px;
margin: -175px 0 0 -125px;
}

#spinner {
position: absolute;
left: 50%;
top: 125px;
width: 250px;
height: 250px;
margin: -125px 0 0 -125px;
}

@-webkit-keyframes cubing {
100% {-webkit-transform: rotateY(360deg);}
}

@-moz-keyframes cubing {
100% {-moz-transform: rotateY(360deg);}
}

.whole:hover #spinner {
-moz-animation-name:cubing;
-moz-animation-duration:4s;
-moz-animation-iteration-count:infinite;
-webkit-animation-name:cubing;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:infinite;
}

#upper {
position: absolute;
left: 50%;
top: 0px;
width: 250px;
height: 250px;
margin: 0px 0 0 -125px;
z-index:100;
 -moz-animation-name:circle1;
-moz-animation-duration:3s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-webkit-animation-name:circle1;
-webkit-animation-duration:3s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
}

@-webkit-keyframes circle1 {
100% {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes circle1 {
100% {-moz-transform: rotate(360deg);}
}

#lower {
position: absolute;
left: 50%;
top: 0px;
width: 250px;
height: 250px;
margin: 0px 0 0 -125px;
z-index:1;
 -moz-animation-name:circle2;
-moz-animation-duration:3s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-webkit-animation-name:circle2;
-webkit-animation-duration:3s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
}

@-webkit-keyframes circle2 {
100% {-webkit-transform: rotate(-360deg);}
}

@-moz-keyframes circle2 {
100% {-moz-transform: rotate(-360deg);}
}

#texter {
position: absolute;
left: 50%;
top: 0px;
width: 250px;
height: 100px;
margin: 225px 0 0 -125px;
z-index:200;
color: #dc911b;
text-align: center;
font-family: "Segoe UI", Verdana, Tahoma, Sans-serif;
font-size: 36px;
text-shadow: 0px 0px 3px #dc911b;
}
// Works in webkit/moz only
// Thanks for Chris Burnell, hover effect works better now.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.