Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

PROGRESS BAR RESETS IN HARLOWE

I did a progress bar it starts but it resets when go with the middle...
How can I do?


<div class="progress-bar">
<br>
<div style="width: 76.7%"></div>
</div>

<style>

tw-story{
width: 100%
}


body { background: black; padding: 100px; margin: 0;}

.progress-bar {

background-image: url(./bar.png) ;
background-repeat: no-repeat;
width: 95%;
height: 10%;



}
.progress-bar > div {
color: white;
background: url(./sal.png);
background-repeat: no-repeat;
overflow: hidden;
white-space: nowrap;
margin: -84px 0px 1px 85px;
padding-bottom: 35px;
border-radius: 10px;
-webkit-animation: progress-bar 2s;

animation: progress-bar 2s;
}

@-webkit-keyframes progress-bar {
0% { width: 0; }
}

@keyframes progress-bar {
0% { width: 0; }
}
</style>

Comments

  • When asking a question you need to state both the name and version of story format you are using, as answers can be different for each one. Also please use the code tag when posting code or markup—it's C on the editor bar.

    Without a copy of the images used in your example it is a little difficult to test it but after a quick scan of your example I did notice a couple of potential issues.

    1. Adding extra lines to your progress bar markup, either via br elements or by adding line-breaks to the code, can effect the layout of the final output. If you want to add vertical spacing/height to the bar then I suggest using CSS height, padding or margins to do so.

    2. Harlowe's tw-story element is not a child of the body element, this means that CSS applied to the body element does not always work as expected. As an example of this issue the 100px padding you are trying to adding to the four edges of the body element may result in a 200px high blank space being added above the content of the tw-story element instead.
    If you wish to add padding to edges of the content of your story then you should do that to the tw-story element instead.

    3. The correct CSS attribute to use when applying a background colour is background-color
  • but my problem its not the color or the body element :neutral:
  • ABELV wrote: »
    but my problem its not the color or the body element :neutral:
    I didn't say your issue was caused by the colour or invalid padding on the body element, I was just pointing out possible general errors in your CSS and HTML examples.

    I did say that I could not test your example because I don't have access to the images you are using, so the example will not display the same on my system as it does on yours. Without knowing at least the dimensions of those images I can't be totally sure what effect they may have on what you are trying to achieve.

    Someone with greater CSS knowledge than I maybe able to determine your issue by just reading the example, I generally need to run an example to see what is actually happening before I can then determine what needs to be changed to fix it.
  • edited February 2017
    It's probably resetting because there's no fill mode, so it's returning to wherever it was before the animation started.

    Try adding:
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    

    I'm not sure why it's resetting partway through, though.
  • edited February 2017
    Where should I place those lines? I put it on the css but it doesnt work
  • edited February 2017
    Actually, you should be able to just add the "forwards" keyword to what you already have, like so:
    .progress-bar > div {
        color: white;
        background: url(./sal.png);
        background-repeat: no-repeat;
        overflow: hidden;
        white-space: nowrap;
        margin: -84px 0px 1px 85px;
        padding-bottom: 35px;
        border-radius: 10px;
        -webkit-animation: progress-bar 2s forwards;
        animation: progress-bar 2s forwards;
    }
    

    I also can't test anything without access to your images, as greyelf pointed out, so I'm not 100% sure that's the problem or the only problem. Not having a fill mode will cause things to "reset" though, usually, so even if that isn't the problem, it could definitely become one.
  • it doesnt work sorry
  • edited February 2017
    @ABELV The reset appears to be caused by a Harlowe keyframe animation. Harlowe runs an animation named appear on tw-transition-container. When that animation completes, it causes your running animation to reset.

    I'm unsure if there's a way to prevent that from happening—at least, one that isn't as bad what's happening now. There may be an easy way I'm simply not thinking of at the moment.

    Off the top of my head. You could possibly delay the start of your animation until the Harlowe animation has ended as a workaround, however, that probably wouldn't be completely palatable either. Another might be to disable the appear keyframe animation, either on tw-transition-container specifically or altogether—that very well might have knock-on effects, however, so I'd be wary of reaching for that hammer.

    Your best bet may be to take this up with Harlowe's author, Leon, by creating a new issue on Harlow's issue tracker.
  • FYI: As a general tip for anyone interested. Both FireFox and Blink-based browsers, and probably WebKit-based browsers, offer an animation panel within their developer tools. You may use that to diagnose issues with animations.

    In Firefox, it's the Animations sub-tab under the main Inspector tab. In Blink-/WebKit-based browsers, click the vertical ellipsis from the main panel, then More tools, and finally Animations.
  • I did it with JS and it works :smiley: thanks a lot :smile:
Sign In or Register to comment.