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

<div id="floatingBarsG" style="">
    <div id="rotateG_01" class="blockG"></div>
    <div id="rotateG_02" class="blockG"></div>
    <div id="rotateG_03" class="blockG"></div>
    <div id="rotateG_04" class="blockG"></div>
    <div id="rotateG_05" class="blockG"></div>
    <div id="rotateG_06" class="blockG"></div>
    <div id="rotateG_07" class="blockG"></div>
    <div id="rotateG_08" class="blockG"></div>
</div>

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-duration:0.5599999999999999s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    border-radius:8px 8px 0 0;
    transform:scale(0.4);
    animation-name:fadeG;
    animation-duration:0.5599999999999999s;
    animation-iteration-count:infinite;
    animation-direction:linear;
}
#rotateG_01 {
    left:0;
    top:28px;
    -webkit-animation-delay:0.20999999999999996s;
    -webkit-transform:rotate(-90deg);
    animation-delay:0.20999999999999996s;
    transform:rotate(-90deg);
}
#rotateG_02 {
    left:8px;
    top:10px;
    -webkit-animation-delay:0.27999999999999997s;
    -webkit-transform:rotate(-45deg);
    animation-delay:0.27999999999999997s;
    transform:rotate(-45deg);
}
#rotateG_03 {
    left:26px;
    top:3px;
    -webkit-animation-delay:0.35s;
    -webkit-transform:rotate(0deg);
    animation-delay:0.35s;
    transform:rotate(0deg);
}
#rotateG_04 {
    right:8px;
    top:10px;
    -webkit-animation-delay:0.41999999999999993s;
    -webkit-transform:rotate(45deg);
    animation-delay:0.41999999999999993s;
    transform:rotate(45deg);
}
#rotateG_05 {
    right:0;
    top:28px;
    -webkit-animation-delay:0.48999999999999994s;
    -webkit-transform:rotate(90deg);
    animation-delay:0.48999999999999994s;
    transform:rotate(90deg);
}
#rotateG_06 {
    right:8px;
    bottom:7px;
    -webkit-animation-delay:0.5599999999999999s;
    -webkit-transform:rotate(135deg);
    animation-delay:0.5599999999999999s;
    transform:rotate(135deg);
}
#rotateG_07 {
    bottom:0;
    left:26px;
    -webkit-animation-delay:0.63s;
    -webkit-transform:rotate(180deg);
    animation-delay:0.63s;
    transform:rotate(180deg);
}
#rotateG_08 {
    left:8px;
    bottom:7px;
    -webkit-animation-delay:0.7s;
    -webkit-transform:rotate(-135deg);
    animation-delay:0.7s;
    transform:rotate(-135deg);
}
@-webkit-keyframes fadeG {
    0% {
        background-color:#000000
    }
    100% {
        background-color:#FFFFFF
    }
}
@keyframes fadeG {
    0% {
        background-color:#000000
    }
    100% {
        background-color:#FFFFFF
    }
}

I'm sorry, but I just have to say that site has some horrible code formatting. And they don't even give you the code in a `
` element, so it doesn't even preserve whitespace. [Here](http://jsfiddle.net/PWLzb/3/) is a much cleaner code (although it doesn't work yet). — Joeytje50, May 16 '14 at 13:24
@Newcoma please also update the code you pasted in your question then. — Joeytje50, May 16 '14 at 13:29

Joeytje50 · Accepted Answer · 2022-05-30T10:57:27.963

4

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;
}

edited May 30 '22 at 10:57

answered May 16 '14 at 13:33

Joeytje50

18,636
15
63
95

1

@emisfera how's that? I've scaled it to exactly 200% the size. The question was how to resize it using px, em or **%**, which is what I did. 2 stands for 200%. – Joeytje50 May 16 '14 at 13:36

Resize css spinner

1 Answers1