A Pen by Secret Sam.

An-Anonymous-Pen.markdown

An Anonymous Pen

Inspired by this article: http://atomicnoggin.ca/blog/2010/02/20/pure-css3-pie-charts/ I created the responsive version of the pies.

A Pen by Secret Sam on CodePen.

License.

index.html

<div id="ring-1" class="ring">
    <div class="pie-wrapper spinner">
      <div class="pie"></div>
      <div class="clipper"></div>
    </div>
    <div class="pie-wrapper fill">  
      <div class="pie"></div>  
    </div>
    <div class="clipper out"></div>
    <div class="pie background"></div>
    <div class="pie trace"></div>
</div>

<div id="ring-2" class="ring">
    <div class="pie-wrapper spinner">
      <div class="pie"></div>
      <div class="clipper"></div>
    </div>
    <div class="pie-wrapper fill">  
      <div class="pie"></div>  
    </div>
    <div class="clipper out"></div>
    <div class="pie background">
      <div class="text">Sample Text!</div>
    </div>
    <div class="pie trace"></div>
</div>

<div id="ring-3" class="ring gt50">
    <div class="pie-wrapper spinner">
      <div class="pie"></div>
      <div class="clipper"></div>
    </div>
    <div class="pie-wrapper fill">  
      <div class="pie"></div>  
    </div>
    <div class="clipper out"></div>
    <div class="pie background">
    </div>
    <div class="pie trace"></div>
</div>

style.css

.ring{
  width:300px;
  height:300px;
  background:white;
  position: relative;
  overflow:hidden;
  float:left;
  margin-right:30px;
}

.pie-wrapper{
  width:100%;
  height:100%;
  position:absolute;
  background:inherit;
}

.clipper{
  position: absolute;
  background:inherit;
  width:50%;
  height:100%;
}

.pie-wrapper .clipper{
  left:50%;
}


.pie{
  position:absolute;
  width:100%;
  height:100%;
  border-radius:50%;
  background: green;
}

.pie-wrapper.fill{
  left:50%;
  width:50%;
  display:none;
  overflow:hidden;
}

  .pie-wrapper.fill .pie{
    width:200%;
    left:-100%;
  }

.pie.background{
  background: inherit; /*inherit the background color from the .ring*/
  width:90%;  
  height:90%;
  top:5%; 
  left:5%; 
  z-index:101; /*this must have the highest z-index*/
}

.pie.background .text{
  text-align:center;
  line-height:100%;
  padding:40% 0 0;
}

.pie.trace{
  opacity:.3;
  z-index: 100; 
}

.gt50 .clipper.out{
  display:none;
}

.gt50 .pie-wrapper.fill{
  display:block;
}




#ring-1{
  width: 150px;
  height:150px;
}

#ring-1 .pie-wrapper.spinner{
  -webkit-transform:rotate(95deg);
}


#ring-2{
  width:250px;
  height:250px;
}

#ring-2 .pie.background{
  width: 50%;
  height:50%;
  top:25%;
  left:25%;
}

#ring-2 .pie-wrapper.spinner{
  -webkit-transform:rotate(67deg);
}

#ring-3 .pie.background{
  display:none;
}

#ring-3 .pie-wrapper.spinner{
  /*note: if the degree is higher than 180 than the ring takes the 'gt50' class*/
  -webkit-transform:rotate(260deg); 
}