<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="circle">
<div class="borderCircle"></div>
<div class="borderCircle2"></div>
<div class="borderCircle3"></div>
<div class="innerCircle">
<p>Loading...</p>
</div>
<div class="outerCirlce"></div>
</div>
body{margin-top:80px}
.circle{
width:100px;
height:100px;
position:relative;
margin:0 auto;
cursor:pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius:110px;
}
.borderCircle2{
position:absolute;
top:-10px;
right:-10px;
bottom:-10px;
left:-10px;
border-radius:200px;
box-shadow:-5px -5px 15px rgba(15,180,231,.3);
}
.borderCircle3{
background: #161616; /* Old browsers */
background: -moz-linear-gradient(top, #161616 0%, #3d3d3d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#161616), color-stop(100%,#3d3d3d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #161616 0%,#3d3d3d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #161616 0%,#3d3d3d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #161616 0%,#3d3d3d 100%); /* IE10+ */
background: linear-gradient(to bottom, #161616 0%,#3d3d3d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161616', endColorstr='#3d3d3d',GradientType=0 ); /* IE6-9 */
border:1px solid #444;
position:absolute;
top:-25px;
right:-25px;
bottom:-25px;
left:-25px;
border-radius:200px;
z-index:-2;
}
.outerCirlce{
margin:0 auto;
background: #91ffff; /* Old browsers */
background: -moz-radial-gradient(20% 20%, ellipse cover, #91ffff 0%, #0fb4e7 24%, #000000 74%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(radial,20% 20%, 0px,20% 20%, 100%, color-stop(0%,#91ffff), color-stop(24%,#0fb4e7), color-stop(74%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(20% 20%, ellipse cover, #91ffff 0%,#0fb4e7 24%,#000000 74%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(20% 20%, ellipse cover, #91ffff 0%,#0fb4e7 24%,#000000 74%,#000000 100%); /* Opera 12+ */
background: -ms-radial-gradient(20% 20%, ellipse cover, #91ffff 0%,#0fb4e7 24%,#000000 74%,#000000 100%); /* IE10+ */
background: radial-gradient(ellipse at 20% 20%, #91ffff 0%,#0fb4e7 24%,#000000 74%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91ffff', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-radius:110px;
padding:10px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.outerCirlce{
-webkit-animation-name: rotate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.borderCircle2{
-webkit-animation-name: rotate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.borderCircle{
color:#fff;
background-color:#ccc;
position:absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
z-index:-1;
border-radius:110px;
background: #575b60; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #575b60 1%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#575b60), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #575b60 1%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #575b60 1%,#000000 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #575b60 1%,#000000 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #575b60 1%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575b60', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
box-shadow:-1px 0px 0px #333, 0px -1px 0px #333;
}
.innerCircle{
color:#ccc;
background-color:#ccc;
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
z-index:2;
border-radius:110px;
background: #575b60; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #575b60 1%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#575b60), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #575b60 1%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #575b60 1%,#000000 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #575b60 1%,#000000 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #575b60 1%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575b60', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
box-shadow:-1px 0px 0px #666, 0px -1px 0px #666;
}
.innerCircle:active{
color:#fff;
background: #373a3d; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #373a3d 1%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#373a3d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #373a3d 1%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #373a3d 1%,#000000 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #373a3d 1%,#000000 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #373a3d 1%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373a3d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.innerCircle p{
text-align:center;
margin-top:40%;
font-size:18px;
font-family:sans-serif;
font-weight:bolder;
text-shadow:-1px -1px 0px #444;
}
