Scanning - HTML + CSS

Scanning css

Interactive version here:
http://bit.ly/YyDInC
Tap/click loader to start animation.
@update: bigger wave variant, similar to MVBen's can be still found here: http://bit.ly/WHzQhE

Loader code is based on percentageloader:
http://widgets.better2web.com/loader/
Though I've scraped most of the code. Just wanted to have something quick I can use.

Most parts where made with help of CSS3PS - love this tool! :)
http://css3ps.com/

About 4.5 hours total. Most of the time I was looking on how to implement that loader. Still not happy with solution - it's kinda slow, especially on iPhone. I think instead of timer for horizontal movement I can use css animations - will take a look into it tommorow first thing.

@Update: Replaced setInterval for horizontal movement with CSS. Works much faster on my iPhone 3GS, though still slower than on desktop. Added some sin movement, updated wave asset with new amplitude and made horizontal animation faster (looks more like a fluid with new waves).

  • 1,090 views
  • Icon shotstat like
  • Icon shotstat drop

Rebound of…

Scanning

by MVBen

1 Rebound

  1. Liquid Loader Mk2

More from Max Daunarovich

  1. SVG Switches
  2. Teams - Animated SVG
  3. Clock Icon Svg
  4. Calendar - Animation

Tags

keyboard shortcuts: L or F like post comment