index.html
<body>
<div id="advanced" class="circle"></div>
</body>
CSS
.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
}
<style>
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#advanced {
width: 200px;
height: 200px;
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
/* webkit chrome, safari, mobile */
-webkit-animation-name: spin;
-webkit-animation-duration: 3s; /* 3 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
/* mozilla ff */
-moz-animation-name: spin;
-moz-animation-duration: 3s; /* 3 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
/* microsoft ie */
-ms-animation-name: spin;
-ms-animation-duration: 3s; /* 3 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
</style>
<body>
<div id="advanced" class="circle"></div>
</body>
CSS
.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
}
<style>
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#advanced {
width: 200px;
height: 200px;
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
/* webkit chrome, safari, mobile */
-webkit-animation-name: spin;
-webkit-animation-duration: 3s; /* 3 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
/* mozilla ff */
-moz-animation-name: spin;
-moz-animation-duration: 3s; /* 3 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
/* microsoft ie */
-ms-animation-name: spin;
-ms-animation-duration: 3s; /* 3 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
</style>
