backbone circle rotation with text - html

Question

I am new to backbone...
I would like to increase the size of circle...
can you guys tell me how to double the size of circle...
providing my code below...
and even i wanted it to rotate slowly..and how to enter text inside the circle...
.box {
border-radius: 300px;
width: 20px; height: 10px;
padding: 5px 0;
color: #fff;
font: 10px/10px Arial;
text-align: center;
position: absolute;
}

Answer 1

To change the circle diameter, you change the CSS, e.g.
.box-view {
width: 60px; height: 60px;
float: left;
position: relative;
margin: 8px;
}
.box {
border-radius: 300px;
width: 40px; height: 30px;
padding: 5px 0;
color: #fff;
font: 10px/10px Arial;
text-align: center;
position: absolute;
}
To change the text displayed, you change the template:
<script type="x-template" id="underscore-template">
<div class="box" id="box-<%= number %>" style="top: <%= top %>px; left: <%= left %>px; background: rgb(0,0,<%= color %>);">
Count : <%= content %>
</div>
</script>
Finally, to make them move slower, you delay the call to the animation function:
var backboneAnimate = function() {
for (var i = 0, l = boxes.length; i < l; i++) {
boxes[i].tick();
}
window.timeout = _.delay(_.defer, 50, backboneAnimate);
};
And the result: http://jsfiddle.net/Fr94w/

Answer 2

Try this one:
.box-view {
width: 40px; height: 40px;
float: left;
position: relative;
margin: 2px;
}
.box {
border-radius: 50%;
width: 40px; height: 40px;
color: #fff;
font: 10px/40px Arial;
text-align: center;
position: absolute;
}
http://jsfiddle.net/9sc4Q/