CSS Circles

Pure css circles and jQuery generator

HTML

<div id="dynamic">
</div>

CSS

.ball { 
    text-align:center;
    height: 24px; width: 24px;
    line-height: 24px;
    border-radius: 50%;
    background: #eee;
    color: #fff;
    display:inline-block;
}
.small { height:12px; width:12px; line-height:12px; }
.large { height:36px; width:36px; line-height: 36px; }

.red { background-color: red; }
.green { background-color: green; }
.blue { background-color: blue; }

JavaScript

var colors = ['#FFC0CB', '#FF0000', '#FFA500', '#FFD700', '#008000', '#0000FF', '#4B0082', '#B0C4DE'];

function css_ball(diameter, color) {
    var ball = $('<span/>').html('&bull;');
    var dpx = diameter.toString + 'px';
    
    ball.addClass('ball').css({
        height: dpx,
        width: dpx,
        'line-height': dpx,
        'background-color': color,
        color: color
    });
    
    return ball;
};

jQuery.each(colors, function(i) {
    var d = 8;
    var c = this.toString();    
    var new_ball = css_ball(d, c);
    $('#dynamic').append(new_ball);
});