+ 4

Is This Animation Good?

https://code.sololearn.com/WFMroEhWAymd/?ref=app Is this spin loader any good. I just learned css today and made that today. Is it good because I feel kinda like a newbie looking at all the other css animations.

html javascript loading css4life

14th Jan 2018, 11:13 PM

Someone Else

11 odpowiedzi

+ 10

nice code,thank you if you want your code work in google chrome browers.... you need to add this prefix (-webkit-)to some port of your code

15th Jan 2018, 12:54 AM

</>

+ 6

Excellent animation 👍 well done & nice work too

15th Jan 2018, 1:23 AM

Hrishikesh Kulkarni

+ 5

Nice. good animation

14th Jan 2018, 11:39 PM

Thor Westergren

+ 4

yes! good animate

14th Jan 2018, 11:21 PM

serhio923

+ 4

Some advices about centering: + avoid <center> element and 'align' attributes, which are deprecated in Html5, and instead use 'text-align:center;' css property (not necessary if you make next changes). + you add 'align-content:center;' to the css <body> rules, but it's specific to the Flexbox model, and will not have any effect until you use 'display:flex;' on the same element ^^ So, flexbox is actually mostly good supported by browsers and can be use as (using it, you doesn't need the <span> css rules, and also must remove positionement declaration of the .spin css class -- 'position:absolute;' but also 'left' and 'bottom' ones): body { display:flex; flex-direction:column; align-content:center; align-items:center; justify-content:center; height:100vh; margin:0; background-color:dodgerblue; } .spin { border-radius:50%; width:50px; height:50px; border:10px dotted aqua; animation-name:turn; animation-duration:2s; animation-iteration-count:infinite; /* bottom: 50%; position: absolute; right: 40%; */ } @keyframes turn { to { transform:rotate(720deg); } } /* span { position:absolute; bottom:40%; right:40%; } */ We force <body> to 100% of viewport height to avoid default behaviour to auto-height based on its content, and zero margin to avoid default margin making grow size: default behaviour is to add space all around the box, not inside. We also use 'flex-direction:column;' in case you follow my advice of removing deprecated <center> element (else that's not necessary, as there is only one child, so 'row' act as 'column' ^^) For more info on how to use flexbox, and differences between 'align-content', 'align-items', and 'justify-content', see: https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS https://developer.mozilla.org/fr/docs/Web/CSS/align-content https://developer.mozilla.org/fr/docs/Web/CSS/align-items https://developer.mozilla.org/fr/docs/Web/CSS/justify-items

15th Jan 2018, 4:43 AM

visph