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
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
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.
Try adding:
I'm not sure why it's resetting partway through, though.
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.
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.
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.