Resize css spinner

Question

I'm using a css3 spinner from http://cssload.net/ I want to know how the scale it up or down using px em or % by changing the height and width on #floatingBarsG. If I set the size 10px higher and 10px wider the icon goes out of shape. Any suggestions ? Here is a working js fiddle example http://jsfiddle.net/PWLzb/8/ This is the html ```

``` and css ``` #floatingBarsG { position:relative; width:62px; height:77px } .blockG { position:absolute; background-color:#FFFFFF; width:10px; height:24px; -webkit-border-radius:8px 8px 0 0; -webkit-transform:scale(0.4); -webkit-animation-name:fadeG; -webkit-animation-dura…

Accepted Answer

This can be done very easily via CSS scale transforms:

```
#floatingBarsG {
    -webkit-transform:scale(2);
    -webkit-transform-origin:top left;
    -moz-transform:scale(2);
    -moz-transform-origin:top left;
    -ms-transform:scale(2);
    -ms-transform-origin:top left;
    -o-transform:scale(2);
    -o-transform-origin:top left;
    transform:scale(2);
    transform-origin:top left;
}
```

Demo.

Edit from 8 years after posting this answer: Nowadays, all of these prefixes are no longer necessary, so simply using the following would suffice:

```
#floatingBarsG {
    transform:scale(2);
    transform-origin:top left;
}
```

Resize css spinner

Solution

Problem