+ 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.

14th Jan 2018, 11:13 PM
Someone Else
Someone Else - avatar
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
Hrishikesh Kulkarni - avatar
+ 5
Nice. good animation
14th Jan 2018, 11:39 PM
Thor Westergren
Thor Westergren - avatar
+ 4
yes! good animate
14th Jan 2018, 11:21 PM
serhio923
serhio923 - avatar
+ 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
visph - avatar
+ 3
Thank you
14th Jan 2018, 11:21 PM
Someone Else
Someone Else - avatar
+ 3
Nice animation
14th Jan 2018, 11:27 PM
👑 Prometheus 🇸🇬
👑 Prometheus 🇸🇬 - avatar
+ 2
@Thor Westergren Thank you
14th Jan 2018, 11:51 PM
Someone Else
Someone Else - avatar
+ 2
@mora thank you, I will add that
15th Jan 2018, 1:13 AM
Someone Else
Someone Else - avatar
+ 1
Nice animated loader)
15th Jan 2018, 2:44 PM
Demid Metelnikov
Demid Metelnikov - avatar
+ 1
Thank you
15th Jan 2018, 3:32 PM
Someone Else
Someone Else - avatar