3

This is the animation I'd like to make using CSS. This spinner is what I'd like to create

It is an animated PNG. Firefox is the only browser I know that will show the animation. Please view this in FireFox so you can see the animation. I'd like to try and make it in CSS so I can use it in more browsers and still get true transparency (which animated gifs can't provide)

enter image description here <-- Here is a single one of the dots, which could be used to make the animation without having to create the dot's shading in css.

This fiddle http://jsfiddle.net/jvrvK/ shows what I've got so far. I sorta have the look of the spheres, but the animation doesn't seem to work in Chrome and I don't understand CSS animations enough to create the same type of rotation in the PNG.

Thanks very much for any help!

Fiddle code below:

<ul class="busy"> <li class="busy-dot1"><b class="busy-dot-shine"></b></li> <li class="busy-dot2"><b class="busy-dot-shine"></b></li> <li class="busy-dot3"><b class="busy-dot-shine"></b></li> <li class="busy-dot4"><b class="busy-dot-shine"></b></li> <li class="busy-dot5"><b class="busy-dot-shine"></b></li> </ul> 
.busy { list-style: none; padding: 0; position: relative; transform-style: preserve-3d; animation: rot 4s linear infinite; width:100px; } .busy-dot1, .busy-dot2, .busy-dot3, .busy-dot4, .busy-dot5 { border-radius: 50%; display: inline-block; transform-style: preserve-3d; margin: 0 4px; } .busy-dot-shine { display: block; border-radius: 50%; background: radial-gradient(circle at 25% 25%, #FFF, rgba(255,255,255,0)); background-color: #193987; animation: rotr 4s linear infinite; height: 20px; width: 20px; }
Improve this question
3
  • 1
    What's wrong with GIF (actual question)? Commented Sep 10, 2013 at 10:10
  • 1
    As much as I agree with you about trying to get true transparency, etc, consider the amount of code you're writing here and the amount of work you're asking the browser to do, all for a very tiny little animation (which looks like a progress wait anim, so probably won't be on screen for long anyway). Is an anim-Gif really that bad? Commented Sep 10, 2013 at 10:29
  • I'm all for using a graphic, but because it needs to be placed on various unpredictable backgrounds, an animated gif won't work because it only works against a single solid color. If all browsers supported animated PNG I'd use it. Commented Sep 10, 2013 at 19:27

4 Answers 4

Reset to default
5

Chrome can be fussy about prefixes, add PrefixFree library to your code. You could add the prefixes yourself, but I find PreFix Free much easier.

//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js

http://jsfiddle.net/adrianjmartin/jvrvK/2/

Another way would be to use SVG: http://jsfiddle.net/adrianjmartin/AcvE5/3/

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I've upvoted you for your first answer, I'd like to upvote you again for the SVG variant. Note that there is an error in the code: change begin="1.s" to begin="1.00s" to make the last circle working right (and change .26 to .25 to respect the step size, eventually). Well done.
@AndreaLigios fixed! Thanks. I was fiddling values back and forth trying to get something close, to what the OP wanted.
Thanks for the SVG example. It's cool except is missing scaling.
I tried adding the scaling, it just looks strange, I'd have to change the timing as well to compensate for the dots moving apart. Another problem is as the dots get closer together you get a layering issue where the draw order in the pseudo 3d space will be wrong. I'm all for using SVG and CSS, but I think you could loose the 3D effect and create a much better looking spinner.
4
+50

This would be an aproximate solution

demo

The HTML is the same that you had; the CSS is

.busy { list-style: none; padding: 0; position: relative; width:100px; } .busy-dot1, .busy-dot2, .busy-dot3, .busy-dot4, .busy-dot5 { border-radius: 50%; display: inline-block; position: absolute; left: 150px; top: 50px; -webkit-animation: rot 4s linear infinite; animation: rot 4s linear infinite; } .busy-dot2 { -webkit-animation-delay: -3.5s; animation-delay: -3.5s; } .busy-dot3 { -webkit-animation-delay: -3s; animation-delay: -3s; } .busy-dot4 { -webkit-animation-delay: -2.7s; animation-delay: -2.7s; } .busy-dot-shine { display: block; border-radius: 50%; background: radial-gradient(circle at 25% 25%, #FFF, rgba(255,255,255,0)); background-color: #193987; height: 20px; width: 20px; } .busy-dot2 .busy-dot-shine { height: 15px; width: 15px; } .busy-dot3 .busy-dot-shine { height: 10px; width: 10px; } .busy-dot4 .busy-dot-shine { height: 6px; width: 6px; } @-webkit-keyframes rot { 0% {-webkit-transform: scaleX(2) rotate(0deg) translateX(50px) scale(1) rotate(0deg) scaleX(0.5); opacity: 0.5;} 25% {-webkit-transform: scaleX(2) rotate(90deg) translateX(50px) scale(1.5) rotate(-90deg) scaleX(0.5); opacity: 0.8;} 50% {-webkit-transform: scaleX(2) rotate(180deg) translateX(50px) scale(1) rotate(-180deg) scaleX(0.5); opacity: 0.5;} 75% {-webkit-transform: scaleX(2) rotate(270deg) translateX(50px) scale(0.8) rotate(-270deg) scaleX(0.5); opacity: 0.2;} 100% {-webkit-transform: scaleX(2) rotate(360deg) translateX(50px) scale(1) rotate(-360deg) scaleX(0.5); opacity: 0.5;} } @keyframes rot { 0% {transform: scaleX(2) rotate(0deg) translateX(50px) scale(1) rotate(0deg) scaleX(0.5); opacity: 0.5;} 25% {transform: scaleX(2) rotate(90deg) translateX(50px) scale(1.5) rotate(-90deg) scaleX(0.5); opacity: 0.8;} 50% {transform: scaleX(2) rotate(180deg) translateX(50px) scale(1) rotate(-180deg) scaleX(0.5); opacity: 0.5;} 75% {transform: scaleX(2) rotate(270deg) translateX(50px) scale(0.8) rotate(-270deg) scaleX(0.5); opacity: 0.2;} 100% {transform: scaleX(2) rotate(360deg) translateX(50px) scale(1) rotate(-360deg) scaleX(0.5); opacity: 0.5;} }

The trick is to set a transform that scales in X 2 times (to generate an elipse when rotated), then rotates and translates to make a circle.

Then apply a scale to make the circles grow, and at last counter-rotate to make the sphere look right

Of course, all the values are aproximate, the GIF is too small to tell if that is accurate

Improve this answer

1 Comment

This looks fairly close. Thank you for your help.
2

HTML:

<div id="all"> <div id="box"> <div id="circle"></div> </div> <div id="box" class="box2"> <div id="circle" class="circle2"></div> </div> <div id="box" class="box3"> <div id="circle" class="circle3"></div> </div> <div id="box" class="box4"> <div id="circle" class="circle4"></div> </div> <div id="box" class="box5"> <div id="circle" class="circle5"></div> </div> </div>

CSS:

#box { position: absolute; width: 50px; height: 50px; } .box2 { -webkit-transform: rotate(35deg); } .box3 { -webkit-transform: rotate(70deg); } .box4 { -webkit-transform: rotate(105deg); } .box5 { -webkit-transform: rotate(140deg); } .circle2 { -webkit-transform: scale(.8); } .circle3 { -webkit-transform: scale(.6); } .circle4 { -webkit-transform: scale(.4); } .circle5 { -webkit-transform: scale(.2); } #circle { position: relative; top: 0px; left: 50px; border-radius: 50%; background: radial-gradient(circle at 25% 25%, #FFF, rgba(255, 255, 255, 0)); background-color: #193987; animation: rotr 4s linear infinite; height: 20px; width: 20px; } #all { position: relative; top: 50px; left: 50px; width: 50px; height: 50px; animation: myfirst; animation-duration: 05s; animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-name: myfirst; -webkit-animation-duration: 05s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; } @keyframes myfirst { 0% { transform: rotate(360deg);} } @-webkit-keyframes myfirst { 0% { -webkit-transform: rotate(360deg);} }

Live demo

Improve this answer

Comments

1

HTML:

<ul class="busy"> <li class="busy-dot1"><b class="busy-dot-shine"></b></li> </ul>

CSS:

.busy { list-style: none; padding: 0; position: relative; transform-style: preserve-3d; animation: rot 4s linear infinite; width:700px; } .busy-dot1, .busy-dot2, .busy-dot3, .busy-dot4, .busy-dot5 { border-radius: 50%; display: inline-block; transform-style: preserve-3d; margin: 0 4px; } .busy-dot-shine { display: block; border-radius: 50%; background: radial-gradient(circle at 25% 25%, #FFF, rgba(255,255,255,0)); background-color: #193987; animation: rotr 4s linear infinite; height: 60px; width: 60px; } .busy li { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ animation:rotate 5s linear infinite; -webkit-animation:rotate 5s linear infinite; /* Safari and Chrome */ } @keyframes rotate { from {transform:rotate(0deg); -ms-transform:rotate(0deg); /* IE 9 */ -webkit-transform:rotate(0deg); /* Safari and Chrome */} to {transform:rotate(-180deg); -ms-transform:rotate(-180deg); /* IE 9 */ -webkit-transform:rotate(-180deg); /* Safari and Chrome */} } @-webkit-keyframes rotate /* Safari and Chrome */ { from {transform:rotate(0deg); -ms-transform:rotate(0deg); /* IE 9 */ -webkit-transform:rotate(0deg); /* Safari and Chrome */} to {transform:rotate(-360deg); -ms-transform:rotate(-360deg); /* IE 9 */ -webkit-transform:rotate(-360deg); /* Safari and Chrome */} }

See in action: http://jsfiddle.net/Ld9pP/1/

You'll probably choose the other one but whatever

Improve this answer

3 Comments

The problem is there's only a single busy-dot here and the dot is not rotating like the animated PNG. Did you view it in FF to see how it animates?
+1 for the lulz of the scrollbar moving the stuff outside its frame in jsFiddle ! :D
let me see...it animates and doesn't finish only in chrome..I don't know why it's doing this...jsfiddle.net/Ld9pP/1

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.