Feedback on my css animation

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

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:

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

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:

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
#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

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

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.