CSS3 doughnut-shaped progress bar

Html:

<Divclass= "Wrap">    <Divclass= "Progress-radial progress-25">        <Divclass= "Overlay">25%</Div>    </Div>    <Divclass= "Progress-radial progress-50">        <Divclass= "Overlay">50%</Div>    </Div>    <Divclass= "Progress-radial progress-75">        <Divclass= "Overlay">75%</Div>    </Div>    <Divclass= "Progress-radial progress-90">        <Divclass= "Overlay">80D</Div>    </Div></Div>

Css:

@import URL (http://fonts.googleapis.com/css?family=Noto+Sans); Body{padding:30px 0;Background-color:#2f3439;font-family:"Noto Sans", Sans-serif;}. Wrap{width:600px;margin:0 Auto;/*-------------------------------------* Bar container *-------------------------------------*/}. Progress-radial{float: Left;Margin-right:30px;position:relative;width:100px;Height:100px;Border-radius:50%;Border:2px solid #2f3439;Background-color:Tomato;/*-------------------------------------* Optional Centered Circle W/text *------------------------------------- */}. progress-radial. Overlay{position:Absolute;width:60px;Height:60px;Background-color:#fffde8;Border-radius:50%;Margin-left:20px;Margin-top:20px;text-align:Center;Line-height:60px;font-size:16px;/*-------------------------------------* Mixin for progress-% class *-------------------------------------*/}. progress-0{Background-image:linear-gradient (90deg, #2f3439 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (90deg, #ff6347 50%, #2f3 439 50%, #2f3439);}. Progress-5{Background-image:linear-gradient (90deg, #2f3439 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (108deg, #ff6347 50%, #2f 3439 50%, #2f3439);}. progress-10{Background-image:linear-gradient (90deg, #2f3439 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (126deg, #ff6347 50%, #2f 3439 50%, #2f3439);}. progress-15{Background-image:linear-gradient (90deg, #2f3439 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (144deg, #ff6347 50%, #2f 3439 50%, #2f3439);}. progress-20{Background-image:linear-gradient (90deg, #2f3439 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (162deg, #ff6347 50%, #2f 3439 50%, #2f3439);}. progress-25{Background-image:linear-gradient (90deg, #2f3439 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (180deg, #ff6347 50%, #2f 3439 50%, #2f3439);}. progress-30{Background-image:linear-gradient (90deg, #2f3439 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (198deg, #ff6347 50%, #2f 3439 50%, #2f3439);}. progress-35{Background-image:linear-gradient (90deg, #2f3439 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (216deg, #ff6347 50%, #2f 3439 50%, #2f3439);}. progress-40{Background-image:linear-gradient (90deg, #2f3439 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (234deg, #ff6347 50%, #2f 3439 50%, #2f3439);}. progress-45{Background-image:linear-gradient (90deg, #2f3439 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (252deg, #ff6347 50%, #2f 3439 50%, #2f3439);}. progress-50{Background-image:linear-gradient ( -90deg, #ff6347 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (270deg, #ff6347 50%, #2 f3439 50%, #2f3439);}. progress-55{Background-image:linear-gradient ( -72deg, #ff6347 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (270deg, #ff6347 50%, #2 f3439 50%, #2f3439);}. progress-60{Background-image:linear-gradient ( -54deg, #ff6347 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (270deg, #ff6347 50%, #2 f3439 50%, #2f3439);}. progress-65{Background-image:linear-gradient ( -36deg, #ff6347 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (270deg, #ff6347 50%, #2 f3439 50%, #2f3439);}. progress-70{Background-image:linear-gradient ( -18deg, #ff6347 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (270deg, #ff6347 50%, #2 f3439 50%, #2f3439);}. progress-75{Background-image:linear-gradient (0deg, #ff6347 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (270deg, #ff6347 50%, #2f3 439 50%, #2f3439);}. progress-80{Background-image:linear-gradient (18deg, #ff6347 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (270deg, #ff6347 50%, #2f 3439 50%, #2f3439);}. progress-85{Background-image:linear-gradient (36deg, #ff6347 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (270deg, #ff6347 50%, #2f 3439 50%, #2f3439);}. progress-90{Background-image:linear-gradient (54deg, #ff6347 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (270deg, #ff6347 50%, #2f 3439 50%, #2f3439);}. progress-95{Background-image:linear-gradient (72deg, #ff6347 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (270deg, #ff6347 50%, #2f 3439 50%, #2f3439);}. progress-100{Background-image:linear-gradient (90deg, #ff6347 50%, rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, 0)), Linear-gradient (270deg, #ff6347 50%, #2f 3439 50%, #2f3439);}

CSS3 doughnut-shaped progress bar