SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    525
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Circle Progress Indicator

    i'm wanting to make a circle progress indicator. i've been searching the web on ways to do this with a couple of images and CSS. anyone have any info on this?

    you can see examples of a circle progress indicator in use here: http://www.apple.com/ipodshuffle/voiceover.html

    click on one of the play buttons to see what i mean.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    525
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think it could work something along these lines: http://petewilliamsagency.com/css/examples/pie/

    just make an image showing the various increments, though it's not exact.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Ajax has multiple loading states which cna make it perfect for an appearence of a loading screen. I believe you want something like what gmail does when they load their email page? I believe ajax does that.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    525
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no, i want it to actually show progress. not just spin around.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    ?? Spin around? Have you ever used gmail? It has a loading bar which increments based on how close it is to actually displaying your gmail page.

    I think it is done by using ajax loading states
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    525
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, i don't want a bar.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Ok then what kind of look 'would' you like.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    525
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    as the subject states a "Circle Progress Indicator" and the example i gave in the first post that is on apple's website.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Some people can't get there. As siad before just wait until the ajax loading state ==4 and until that state is reached I'd just keep the image up on hte screen and then display:none; it once the state==4.

    Google the image.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •