ColorCircle - Traffic Lights in SAPUI5

colorcircle.css

.circlered-text {
    width:50%;
}
.circlered-text:after {
    content: "";
    display: block;
    width: 100%;
    height:0;
    padding-bottom: 100%;
   background: #FF0000;  
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
}
.circlered-text div {
    float:left;
    width:100%;
    padding-top:50%;
    line-height:1em;
    margin-top:-0.5em;
    text-align:center;
    font-weight:bold;
    color:white;
     font-size: 75%; 
}

.circlegreen-text {
    width:50%;
}
.circlegreen-text:after {
    content: "";
    display: block;
    width: 100%;
    height:0;
    padding-bottom: 100%;
   background: #32CD32;  
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
}
.circlegreen-text div {
    float:left;
    width:100%;
    padding-top:50%;
    line-height:1em;
    margin-top:-0.5em;
    text-align:center;
    font-weight:bold;
    color:white;
     font-size: 75%; 
}

.circleyellow-text {
    width:50%;
}
.circleyellow-text:after {
    content: "";
    display: block;
    width: 100%;
    height:0;
    padding-bottom: 100%;
   background: #FFD700;  
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
}
.circleyellow-text div {
    float:left;
    width:100%;
    padding-top:50%;
    line-height:1em;
    margin-top:-0.5em;
    text-align:center;
    font-weight:bold;
    color:white;
     font-size: 75%; 
}

colorcircle.js

sap.ui.core.Control.extend("com.fujitsu.custom.ColorCircle", {      
                                              
    metadata : {                              
        properties : {
           	"value" : {type: "int", defaultValue: "0"},
			"size" : {type: "sap.ui.core.CSSSize", defaultValue: "50px"},			
			"asc" : {type: "boolean", defaultValue: true},	
			"rlimit" : {type: "int", defaultValue: "90"},	
			"glimit" : {type: "int", defaultValue: "75"}			
        }
    },

    renderer : function(oRm, oControl) {      
		oRm.write("<div"); 
		oRm.writeControlData(oControl);  
		oRm.addStyle("width", oControl.getSize());                                                        
		oRm.addStyle("height", oControl.getSize());
		oRm.writeStyles();
		if(oControl.getAsc()){
			if(oControl.getValue() > oControl.getRlimit()){
				oRm.addClass("circlered-text"); 
			}else if((oControl.getValue() <= oControl.getRlimit()) && (oControl.getValue() > oControl.getGlimit())){
				oRm.addClass("circleyellow-text"); 			
			}else{
				oRm.addClass("circlegreen-text"); 			
			}
		}else{
			if(oControl.getValue() <= oControl.getRlimit()){
				oRm.addClass("circlered-text"); 
			}else if((oControl.getValue() > oControl.getRlimit()) && (oControl.getValue() < oControl.getGlimit())){
				oRm.addClass("circleyellow-text"); 			
			}else{
				oRm.addClass("circlegreen-text"); 			
			}		
		}
		oRm.writeClasses();               
		oRm.write(">");
		oRm.write("<div>"); 	  
		oRm.write(oControl.getValue());  
		oRm.write("</div>");                                                
		oRm.write("</div>");
    }
});

colorcircle.txt

# CSS courtesy Jose Vargas : http://codeitdown.com/css-circles/
 
# Related blog can be found of SAP Community Network : http://scn.sap.com/community/developer-center/front-end/blog/2014/03/12/traffic-lights-with-custom-controls-in-sapui5

Thanks for sharing Abesh!
Here is an alternative colorcircle.css which displays the different colors (red, yellow/orange, green) as different shapes (rounded rectangle, triange, circle).
This makes them clearer to read especially for color-blind folks.
Tested in Chrome and IE10.
https://gist.github.com/PaulSenkel/c1863657176bd59c6c47