Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

attempting to recreate a loading gif in css

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.

like image 903
Finnnn Avatar asked Jul 30 '13 11:07

Finnnn


People also ask

How do you load a GIF in CSS?

Method 1. We can do this in one go. Add following to your existing css or create new css file and link it in thr <head> tag. Get a direct link to your preloader animation and put it inside background property, make sure the color (#21242d in this case) matches the background color of the animation.


1 Answers

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.

like image 189
Mr. Alien Avatar answered Oct 03 '22 07:10

Mr. Alien