Feedback on my css animation

HTML-CSS
1

Hi, I made a simple loading screen with just HTML and css. I would really love if you guys could give your feedback on it, so i could improve :smiley:

Here is my pen

1 Like
2

Looks good on Windows Desktop Chrome, but Firefox has these weird vertical line artifacts that get ā€œleft behindā€ like a smear when the dot passes, and get removed as the browser repaints over them when the dot moves back.
Capture

Havenā€™t tried it on mobile.

FYI, In codepen, you donā€™t need all the HTML boilerplate. All that is taken care of for you. In the settings modal window (button at upper right of pen), you can link to scripts, or in your case, add the viewport meta tag that turns off mobile phonesā€™ virtual viewport so the pixels of the device determines the viewport width, which is the only thing you have in the HTML <head> anyway:

Capture
Capture1118Ɨ1099 55.4 KB

3

Also, in terms of your CSS itself, you have a lot of redundant code. You can rewrite it to make it clear which CSS properties are shared:

#dot1, #dot2 {
    width: 20px;
    height: 20px;
    background-color:yellow;
    border-radius: 50%; 
    position: relative;
    margin: auto;
    margin-right: -10px;
    animation-duration:3s;
    animation-fill-mode:forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* animation-direction: alternate; */
}
#dot1 {
   animation-name:load1;
}
#dot2 {
    animation-name:load2;
}

Of course, when you have so many shared attributes, it might make sense to start defining classes that you can reuse for multiple elements:

.dot {
    width: 20px;
    height: 20px;
    background-color:yellow;
    border-radius: 50%; 
    position: relative;
    margin: auto;
    margin-right: -10px;
}
.repeating-animation {
    animation-duration:3s;
    animation-fill-mode:forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* animation-direction: alternate; */
}
#dot1 {
   animation-name:load1;
}
#dot2 {
    animation-name:load2;
}

of course, your HTML would have to be rewritten, but you can see how much more semantic this is:

<div id="dot1" class="dot repeating-animation"></div>
<div id="dot2" class="dot repeating-animation"></div>

Now you can have dots that donā€™t move, and animated shapes that arenā€™t dots that also have repeating animations.

1 Like
4

Thank you for the reply man :smiley:

I wrote my code in Visual Studio Code, and copied that to codepen : )

[quote=ā€œvipatron, post:3, topic:240115ā€]

I tried to share some properties and it messed the whole this. (stupid me)

reallyā€¦ thanks for the suggestions bro. iā€™m will use classes more often.
and sorry for my bad english : )
let me ā€œre-codeā€ my work, iā€™ll let you know when iā€™m done :smiley:

5

Well, in the software world, english helps, but how your code speaks matters more (it is a language, after all) and the fact that you are excited and experimenting, trying to do things no one told you to do, that speaks the loudest.

I look forward to the updates.

P.S. I thought that HTML template looked familiar! Iā€™ve switched from CodePen to VSCode myself recently, and Iā€™ve kind of fallen in love with their git integration, so you never lose code, and can store it for free with private repositories. They even let you host simple front-end-only pages once theyā€™re complete:


2 Likes
6 
#dot1 {
   animation-name:load1;
  margin-right:-10px;
}
#dot2 { 
    animation-name:load2;
  margin-left:-10px;
}

Hey i changed my code, thanks for the help bro.
i had to declare margins separately. Now it looks much better : )

Iā€™ve been using sublime text editor from, wellā€¦ as long as i can remember. but about a week ago i found vscode, and in my opinion vscode is better than sublime.
i do have a github account, i created one when i realised version control is important. i pushed this ā€œworkā€ on it just to learn git :stuck_out_tongue:

Thanks bro, I really am excited about this. Iā€™m looking forward to work as ar Front-end developer, i donno if it is possible, let see how it goesā€¦

1 Like
7

Great work, keep it up!

FYI, Gitlab and Github are not the same thing. Github is older and has more members, but GitLab has two main selling points for me:

  1. Free Private repositories - in case you are embarrassed of your code, or might want to reuse some code in a commercial context eventually and thus want to keep the source private.
  2. Continuous Integration & Delivery tools - GitLab was originally a suite of tools to automate production built by some guy to make his own job easier. Automation of testing and deployment, making it takes as few steps as possible to go from code to an operational build, be it in for development or production, is something that is a huge time saver. I donā€™t want to fart around with the command line, I want to write code and see it work, no matter how frequent the updates.

So, for those reasons, even though I have a gitHub to follow other peopleā€™s projects, I chose to put my own remote repositiories on GitLab.

1 Like
8

Oh, i thought they were same. Will definitely take a look at that : )
Anyway, thanks for the long described reply bro. I really appreciate it.