Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Try to create a progress bar in a different way

    Hi there,

    I'm looking for another way to create something that looks like a progress bar.
    There are many amazing tutorials out there what you can do with HTML5.
    But I can't anything like that I will try to do.

    To create this in Flash it is nearly easy but I want it in HTML5.

    So what I want to do is to have a shape and behind this shape there is e.g. an image (maybe a background image) that slowly moves from bottom to the top.
    Later it can move also from left to the right while it goes up. But that is later.

    It would also be nice when the background image can stop e.g. at 50% on its way to the top.
    This is one simple solution I try to create.
    Try to create a progress bar in a different way-trial.png
    And this shall be the result.
    Try to create a progress bar in a different way-final.png

    But I can't find anything to hide the image in the background. It is always visible not only within the shape.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,916
    Thanks
    15
    Thanked 227 Times in 227 Posts
    What you're proposing to do should not be difficult at all. You would need a containing div that is the size of the 'window' image, the window image itself, the progress image. The container would be position: relative;, the two images would be position: absolute, the widow image would be top: 0; left: 0;, the top and left of the progress image would change, your container would be set for overflow: hidden;
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok thank you for the tip.
    I have built this here now: http://codepen.io/Tipo/pen/rpCAc
    But I can't get it to stop e.g. at 50%.

    Maybe I can fix this with JavaScript?
    For example when I want it to stop at 50% then I will only count in the keyframe to 50% but when I try this manually it don't stop.

  • #4
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Only with HTML & CSS I couldn't find a solution, so I added some jQuery:
    http://codepen.io/Tipo/pen/qBorl

    Maybe someone can solve without javascript.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,636
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    I don’t see how a progress bar without JavaScript could reliably show the progress of loading. It could only be a generic loading animation but actual loading could take longer than the animation is programmed, so it wouldn’t be accurate.


  •  

    Tags for this Thread

    Posting Permissions

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