Loading bars

6 Responses

  1. Max Daunarovich Max Daunarovich

    I was really impressed by that loading animation by @Marcel so I decided to implement it with HTML+CSS combo.

    Full view here (can be out of sync for some reason, try to reload and check editable version):
    http://codepen.io/MaxStalker/full/AktfK

    Edit & fork here:
    http://codepen.io/MaxStalker/pen/AktfK

    You can play with variables at the begining to get different results. For example something like this:
    http://codepen.io/MaxStalker/pen/yGAxE
    http://codepen.io/MaxStalker/pen/eLkKB
    http://codepen.io/MaxStalker/pen/naDHh

    I also decided to add some new software/technologies to the mix so I could study/practice, while doing this piece:
    - Emacs - to prototype and get used to keyboard shortcuts. Like it so far.
    - SCSS - for variables and "for-loop" to add different delays to nth-child.
    - Jade - I decided to use this templating engine instead of javascript to add fixed amount of blocks in a loop.

    TODO: Clean CSS. Add top part. Add custom easing function.

    likes

    4 months ago

  2. Hugo Hugo

    Interesting, nice work!

    likes

    4 months ago

  3. Rob Nichols Rob Nichols

    great work bro

    likes

    4 months ago

  4. Max Daunarovich Max Daunarovich

    @Hugo Glad you like it :)
    @Rob Nichols Thanks, man!

    4 months ago

  5. Marcel Marcel

    @Max Daunarovich I really like it. (especially that you're using jade haha)

    likes

    3 months ago

  6. Max Daunarovich Max Daunarovich

    @Marcel Thanks, man! Something special about that jade? :)

    3 months ago

keyboard shortcuts: previous shot next shot L or F like