SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how do I make this animation?

    http://tiste.io/

    Check out the "skillmeters" on this site, how would I do this? I can make a progress-bar that fills up with a css keyframe-animation but how should I do to make it a circle that fills like this? If I make a circle in a circle and use keyframe-animate width it would fill from one side to another, and not around like this one?

    Anyone know how to do this?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,579
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Launch the web page.

    Right-click on the page and "View Page Source..."

    Read the source code. All of the resources used can be found therein.

    That's what we would have to do.

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    never mind

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The circle in that animation is done with drawing on the "canvas" and animated with js and is not a css3 animation.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    This is the best I could come up with css alone.

    I'm sure there's a better way to do it. It could be made smoother with more elements.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •