backbone circle rotation with text

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/