"Loading static"
Bootstrap 3.0.0 Snippet by camilogalvez

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="container"> <div class="row"> <div class="circle"> <div class="slice"> <div class="bar"></div> <div class="fill"></div> </div> </div> </div> </div>
.circle *, .circle *:before, .circle *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .circle { position: relative; font-size: 120px; width: 1em; height: 1em; border-radius: 50%; float: left; } .circle:after { position: absolute; top: 0.08em; left: 0.08em; display: block; content: " "; border-radius: 50%; width: 0.84em; height: 0.84em; } .circle .slice { position: absolute; width: 1em; height: 1em; clip: rect(auto,auto,auto,auto); animation-name: slice; animation-duration: 1s; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; } @keyframes slice { 0% { clip: rect(0em,1em,1em,0.5em); -webkit-animation-timing-function:linear; animation-timing-function:linear; } 49% { clip: rect(0em,1em,1em,0.5em); -webkit-animation-timing-function:linear; animation-timing-function:linear; } 50% { clip: rect(auto,auto,auto,auto); -webkit-animation-timing-function:linear; animation-timing-function:linear; } 100% { clip: rect(auto,auto,auto,auto); } } .circle .bar { position: absolute; border: 0.08em solid #1f7dd2; width: 0.84em; height: 0.84em; clip: rect(0em,0.5em,1em,0em); border-radius: 50%; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); animation-name: bar; animation-duration: 0.5s; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; } @-webkit-keyframes bar { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function:linear; animation-timing-function:linear; } 100% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } } @keyframes bar { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function:linear; animation-timing-function:linear; } 100% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } } .circle .fill { position: absolute; border: 0.08em solid #1f7dd2; width: 0.84em; height: 0.84em; clip: rect(0em,0.5em,1em,0em); border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); animation-name: fill; animation-duration: 0.5s; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-delay: 0.5s; } @-webkit-keyframes fill { 0% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation-timing-function:linear; animation-timing-function:linear; } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes fill { 0% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation-timing-function:linear; animation-timing-function:linear; } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }

Related: See More


Questions / Comments: