This is my solution.

I set a background on body to show it is transparent

body {
  background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
  height: 500px;
  background-size: 500px 500px;
  background-repeat: no-repeat;
}

html {
  height: 100%;
}

#container {
  position: absolute;
  width: 400px;
  height: 400px;
   border: solid red 1px;
   animation: colors 4s infinite;
}

#halfclip {
  width: 50%;
  height: 100%;
  right: 0px;
  position: absolute;
   overflow: hidden;
   transform-origin: left center;
   animation: cliprotate 16s steps(2) infinite;
   -webkit-animation: cliprotate 16s steps(2) infinite;
}

.halfcircle {
  box-sizing: border-box;
  height: 100%;
  right: 0px;
  position: absolute;
  border: solid 25px transparent;
   border-top-color: blue;
   border-left-color: blue;
   border-radius: 50%;
}
#clipped {
  width: 200%;
   animation: rotate 8s linear infinite;
   -webkit-animation: rotate 8s linear infinite;
}
#fixed {
  width: 100%;
    transform: rotate(135deg);  
   animation: showfixed 16s steps(2) infinite;
   -webkit-animation: showfixed 16s linear infinite;
}

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

@keyframes cliprotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}


@-webkit-keyframes rotate {
  0% {transform: rotate(-45deg);}
  100% {transform: rotate(135deg);}
}

@keyframes rotate {
  0% {transform: rotate(-45deg);}
  100% {transform: rotate(135deg);}
}

@-webkit-keyframes showfixed {
  0% {opacity: 0;}
  49.9% {opacity: 0;}
  50% {opacity: 1;}
 100% {opacity: 1;}
}

<div id="container">
    <div id="halfclip">
        <div class="halfcircle" id="clipped">
        </div>
    </div>
    <div class="halfcircle" id="fixed">
    </div>
</div>

And this is a variation on the solution, to make it run only once on hover

body {
  background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
  height: 500px;
  background-size: 500px 500px;
  background-repeat: no-repeat;
}

html {
  height: 100%;
}

#container {
  position: absolute;
  width: 300px;
  height: 300px;
   border: solid red 1px;
}

#halfclip {
    width: 50%;
    height: 100%;
    right: 0px;
    position: absolute;
    overflow: hidden;
    transform-origin: left center;
}

#container:hover #halfclip {
    animation: cliprotate 6s 1;
    transform: rotate(180deg);
} 

@keyframes cliprotate {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(0deg);}
  50.01% {transform: rotate(180deg);}
  100% {transform: rotate(180deg);}
}

.halfcircle {
  box-sizing: border-box;
  height: 100%;
  right: 0px;
  position: absolute;
  border: solid 25px transparent;
   border-top-color: blue;
   border-left-color: blue;
   border-radius: 50%;
}

#clipped {
    width: 200%;
    transform: rotate(-45deg);
}
#container:hover #clipped {
    transform: rotate(135deg);
    animation: rotate 3s linear 2;
}


@keyframes rotate {
  0% {transform: rotate(-45deg);}
  100% {transform: rotate(135deg);}
}


#fixed {
  width: 100%;
    transform: rotate(135deg);  
    opacity: 0;
}

#container:hover #fixed {
    opacity: 1;
    animation: showfixed 6s 1;
}



@keyframes showfixed {
  0% {opacity: 0;}
  49.99% {opacity: 0;}
  50% {opacity: 1;}
 100% {opacity: 1;}
}

<div id="container">
    <div id="halfclip">
        <div class="halfcircle" id="clipped">
        </div>
    </div>
    <div class="halfcircle" id="fixed">
    </div>
</div>

You need to divide by 2 every values involved, even the clip(); ones (fiddle updated)

#loading {
  width: 50px;
  height: 50px;
  margin: 30px auto;
  position: relative;
}
.outer-shadow,
.inner-shadow {
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow {
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 100%;
  background-color: #ffffff;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 50px, 50px, 25px);
  border-radius: 100%;
  background-color: #fff;
}
.fill,
.dot span {
  background-color: #f50;
}
.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
  z-index: 1;
  -webkit-animation: left 1s linear;
  -moz-animation: left 1s linear;
  animation: left 1s linear both;
}
@keyframes left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}
.right {
  z-index: 3;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.right .fill {
  z-index: 3;
  -webkit-animation: right 1s linear;
  -moz-animation: right 1s linear;
  animation: right 1s linear both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
@keyframes right {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
.inner-shadow img {
  margin-left: 8px;
  margin-top: 7px;
}

<div id='loading'>
  <div class='outer-shadow'>
  </div>
  <div class='inner-shadow'>
  </div>
  <div class='hold left'>
    <div class='fill'></div>
  </div>
  <div class='hold right'>
    <div class='fill'></div>
  </div>

</div>

edit: in respond to comment @Filipe

How would the change from clip to clip-path be? I tried (also changing rect to inset), but the animation stops working.

Possible example with clip-path instead clip .

#loading {
  width: 50px;
  height: 50px;
  margin: 30px auto;
  position: relative;
}

.outer-shadow,
.inner-shadow {
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.inner-shadow {
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 100%;
  background-color: #ffffff;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.hold {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 0 0, 0 100%, 50% 100%);
  border-radius: 100%;
  background-color: #fff;
}

.fill,
.dot span {
  background-color: #f50;
}

.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.left .fill {
  z-index: 1;
  -webkit-animation: left 1s linear;
  -moz-animation: left 1s linear;
  animation: left 1s linear both;
}

@keyframes left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@-webkit-keyframes left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}

.right {
  z-index: 3;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

.right .fill {
  z-index: 3;
  -webkit-animation: right 1s linear;
  -moz-animation: right 1s linear;
  animation: right 1s linear both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

@keyframes right {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@-webkit-keyframes right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.inner-shadow img {
  margin-left: 8px;
  margin-top: 7px;
}

<div id='loading'>
  <div class='outer-shadow'>
  </div>
  <div class='inner-shadow'>
  </div>
  <div class='hold left'>
    <div class='fill'></div>
  </div>
  <div class='hold right'>
    <div class='fill'></div>
  </div>
</div>

There is a very easy to follow, informative and detailed tutorial on exactly how to achieve this (and more) by Anders Ingemann, which can be found here.

Its a fairly complex operation- so I'll simply distil the final stage from the tutorial here

Demo Fiddle

HTML

<div class="radial-progress">
    <div class="circle">
        <div class="mask full">
            <div class="fill"></div>
        </div>
        <div class="mask half">
            <div class="fill"></div>
            <div class="fill fix"></div>
        </div>
        <div class="shadow"></div>
    </div>
    <div class="inset"></div>
</div>

CSS/LESS

.radial-progress {
    @circle-size: 120px;
    @circle-background: #d6dadc;
    @circle-color: #97a71d;
    @inset-size: 90px;
    @inset-color: #fbfbfb;
    @transition-length: 1s;
    @shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
    margin: 50px;
    width: @circle-size;
    height: @circle-size;
    background-color: @circle-background;
    border-radius: 50%;
    .circle {
        .mask, .fill, .shadow {
            width: @circle-size;
            height: @circle-size;
            position: absolute;
            border-radius: 50%;
        }
        .shadow {
            box-shadow: @shadow inset;
        }
        .mask, .fill {
            -webkit-backface-visibility: hidden;
            transition: -webkit-transform @transition-length;
            transition: -ms-transform @transition-length;
            transition: transform @transition-length;
        }
        .mask {
            clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
            .fill {
                clip: rect(0px, @circle-size/2, @circle-size, 0px);
                background-color: @circle-color;
            }
        }
    }
    .inset {
        width: @inset-size;
        height: @inset-size;
        position: absolute;
        margin-left: (@circle-size - @inset-size)/2;
        margin-top: (@circle-size - @inset-size)/2;
        background-color: @inset-color;
        border-radius: 50%;
        box-shadow: @shadow;
    }
}

Example jQuery (could be substituted with CSS)

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
var transform_styles = ['-webkit-transform', '-ms-transform', 'transform'];
window.randomize = function () {
    var rotation = Math.floor(Math.random() * 180);
    var fill_rotation = rotation;
    var fix_rotation = rotation * 2;
    for (i in transform_styles) {
        $('.circle .fill, .circle .mask.full').css(transform_styles[i], 'rotate(' + fill_rotation + 'deg)');
        $('.circle .fill.fix').css(transform_styles[i], 'rotate(' + fix_rotation + 'deg)');
    }
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);

You need CSS Animations.

In your HTML code, put the follow class:

<div class="rotate">
 <!-- The content -->
</div>

And in your CSS file, add these rules (this example is only for webkit):

div:hover {
     -webkit-animation: rotate 2s linear infinite;
}

@-webkit-keyframes rotate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(180deg);
    }
}

Here's a DEMO

Cheers, Leo

If you want to works in Firefox, just add the respective vendor prefixes.

Hope this is what you want.

To make the border animation slow, just increase the time delay. Like I've done here.

.circle:hover {
  animation: border 2s ease 1 forwards;
}

updated code

EDITED

html {
  height: 100%;
}
body {
  height: 100%;
  background: #ddd;
}
.header{
  width:100%;
  height:100px;
  background:cyan;
  z-index: 9999;
}
.circle_holder {
  width: 150px;
  margin: 0 auto;
  padding: 10px;
  overflow: hidden;
}
.circle {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: red;
  box-shadow: 60px -60px 0 2px #dddddd, -60px -60px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px #dddddd;
}
.circle:hover {
  animation: border 2s ease 1 forwards;
  cursor: pointer;
}
@keyframes border {
  0% {
    box-shadow: 60px -60px 0 2px #dddddd, -60px -60px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;
  }
  25% {
    box-shadow: 0 -125px 0 2px #dddddd, -60px -60px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;
  }
  50% {
    box-shadow: 0 -125px 0 2px #dddddd, -125px 0px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;
  }
  75% {
    box-shadow: 0 -125px 0 2px #dddddd, -125px 0px 0 2px #dddddd, 0px 125px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;
  }
  100% {
    box-shadow: 0 -125px 0 2px #dddddd, -125px 0px 0 2px #dddddd, 0px 125px 0 2px #dddddd, 120px 40px 0 2px #dddddd, 0 0 0 2px black;
  }
}
span {
  position: absolute;
  bottom: -50px;
  color: #333;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
}

<div class="header">

</div>
<div class="circle_holder" style="z-index: 1;">
  <div class="circle">
  <span>Lorem Ipsum Dolor </span>
 </div>
</div>