attempting to recreate a loading gif in css

Question

I'm trying to recreate the following gif in pure css -

loading image

Css here - http://codepen.io/anon/pen/FmCaL - (webkit/chrome only at the mo)

I'm attempting to recreate the missing chunk of the circle by using the before & after psuedo selectors, but I can't get the angles right.

Is it even possible to do? Is there a better approach?

Thanks for any help so far. I should have specified that I need the arrow to be transparent. I can't use a solid color for the missing part of the circle.

What exactly is currently wrong with the angles? Do you mean the little gap in the inner circle? Is it a problem that the outer circle isn't a real circle? — Martin Thoma, Jul 30 '13 at 11:33
The before and after elements don't look correct. They should be fully attached to the 'circle'. It's not similar enough to the gif. — Finnnn, Jul 30 '13 at 11:36

Mr. Alien · Answer 1 · 2013-07-30T14:05:33.800

How about simply doing it like this?

Demo

div {
    border: 10px solid #000;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: relative;    
}

div:after {
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    right: -12px; 
    content: " ";
    border-bottom: 12px solid #fff;
    border-right: 12px solid transparent;
    transform: rotate(10deg);
}

Explanation: What we are doing here is using :after pseudo to position the element absolute to the circle and using transform property to rotate the triangle.

Demo 2 (With animation)

div {
    border: 10px solid #000;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: relative;    
    animation: spin 1s infinite linear;
}

div:after {
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    right: -12px; 
    content: " ";
    border-bottom: 12px solid #fff;
    border-right: 12px solid transparent;
    transform: rotate(10deg);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

My Suggestion: As you updated your qustion, you said you wanted a transparent gutter, I would suggest you to use a .png image and rotate it, rather than writing 100 lines of CSS and worrying about cross browser compatibility. Alternatively as I've shared a link in the comments, you can use CSS masking.

My thoughts exactly. Updated it, so it also works in Chrome/webkit: http://jsfiddle.net/EFycS/1/ — GolezTrol, Jul 30 '13 at 11:43
net issues, will update answer soon with a spinning demo and explanation, sorry for that — Mr. Alien, Jul 30 '13 at 11:49
Thanks for your help, but I need the arrow to be transparent. I can't be certain what color it will be over. — Finnnn, Jul 30 '13 at 12:25
@arbitter the spinner is yet to be animated, am in office, connection is weak, give me some time — Mr. Alien, Jul 30 '13 at 13:01
@arbitter OP didn't wanted to spin, he wanted to make a triangle gutter on the ring and that's what I did, so it is an answer, but later he updated the question. :) — Mr. Alien, Jul 30 '13 at 13:03

Dziad Borowy · Answer 2 · 2013-07-30T13:14:26.600

If you do not care whether the triangle is transparent, can I suggest something like this:

DEMO (works in chrome and firefox)

.loading {
    display: inline-block;
    margin: 5em;
    border: 10px solid grey;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;     
}
.loading:before {
    content: '';
    display: block;
    border: 13px solid transparent;
    border-right-color: white;
    width: 20px;
    height: 0;
    border-radius: 50%;
    margin: -3px 0 0 -13px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(359deg); }}
@-moz-keyframes spin { 100% { -moz-transform: rotate(359deg); }}
@keyframes spin { 100% { transform: rotate(359deg); }}

attempting to recreate a loading gif in css

2 Answers2

Linked