Yin Yang like css with empty center

Question

I have this loader here: https://jsfiddle.net/guanzo/hdn3wqmd/2/

I'm trying to make it look like this

I'm not sure this can be done with borders alone, i've tried a bunch of variations of border width/radius etc, but it never comes out right.

.loader {
    border-top: 40px solid #3498db; /* Blue */
    border-bottom: 40px solid darkblue; /* Blue */
    border-radius: 50%;
    width: 300px;
    height: 300px;
}

EDIT: I'm not asking about making it spin. I'm asking how to create my provided image above with css. You'll notice that a Yin Yang's shape fills a circle. My desired shape does not, and has an empty center.

Possible duplicate of [CSS3 Rotate Animation](http://stackoverflow.com/questions/16771225/css3-rotate-animation) — Nick Grealy, Jan 24 '17 at 04:59
@Michael, not exactly. I'm not looking for a yin yang, my example has an empty center. Nick, that's not what my question is. — Eric Guan, Jan 24 '17 at 05:09

Shivkumar kondi · Answer 1 · 2017-01-24T05:40:58.097

0

Is it Okay..

* {
  box-sizing:border-box;

}
div{
  
display:inline-block;
}
.loader {
    border-top: 40px solid #3498db; /* Blue */
    border-bottom: 40px solid darkblue; /* Blue */
     border-radius:75% 25% 75%;
     width: 200px;
     height: 200px;
     transform: rotate(35deg);
     margin-left:25%;
}

<div class="wrap">
<div class="loader"></div>
</div>

Or You can try some more adjustments here

edited Jan 24 '17 at 05:40

answered Jan 24 '17 at 05:33

Shivkumar kondi

6,458
9
31
58

Yin Yang like css with empty center

1 Answers1