What can i do to improve the codes?

Question

Very less people see them so I have no idea what can be improved
https://code.sololearn.com/W23kzzZZv96F/?ref=app
https://code.sololearn.com/Wf0u4q0E2Uv7/?ref=app

Answer 1

I find, finally it was not so hard
https://code.sololearn.com/W0z0Fn1t3Hhu/?ref=app

Answer 2

Good work on them. Maybe you can add a feature like changing color after each loop.

Answer 3

For loader animation 2, try to use classes instead of id, you can also delete div with id "l2" and rather create a before for you "l" div to optimise and minimize your code

Answer 4

@antoine
I didn't understand what you said

Answer 5

Instead of that:
<div id="l"><div id="l2"></div></div>
<div id="l"><div id="l2"></div></div>
<div id="l"><div id="l2"></div></div>
<div id="l"><div id="l2"></div></div>
Try that:
<div class="l"></div>
<div class="l"></div>
<div class="l"></div>
<div class="l"></div>
<style>
div.l:before{
content:"";
position:absolute;
top:50%;left:50%;
transform: translate(-50%,-50%);
height:40px;
width:40px;
background-color:#fff;
animation:rot,sc 2s ease-in-out infinite;
}
</script>

Answer 6

@antoine
did you mean this
https://code.sololearn.com/WSgOQw0RYEWv/?ref=app

Answer 7

Just add this in the css part:
.l{
height:40px;
width:40px;
border:4px solid #fff;
animation:rot 4s linear infinite;
margin-left:60px;
margin-top:60px;
float:left;
}

Answer 8

Still not the same but looks good
https://code.sololearn.com/WSgOQw0RYEWv/?ref=app