/    Sign up×
Community /Pin to ProfileBookmark

Help with horizontally lining up progress bar

Thanks again for all the previous help. I have some progress bar code that works successfully. It shows the percentage of upload and the progess bar moving while uploading. However, the percentage display is on top of the bar, I’d like it to be on the left of the bar, on the same horizontal line. But can’t seem to do it. Here’s the current code

“`
#progress-bar {
height: 20px;
width:98%;
border: 0.25vw solid #f5f5f5;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin:0.25vw auto;
}

#progress-bar .bar {
width: 0;
height: 100%;
background-color: #da6a63;
position: absolute;
top: 0;
left: 0;
}

#progress-text{
color: red;
font-weight: 800;
}
“`

and the html:

“`
<span id=”progress-text”></span>
<div id=”progress-bar”>
<div class=”bar”></div>
</div>
“`

any guidance is appreciated

to post a comment
CSSHTML

1 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumAug 17.2021 — Use flex layout to arrange the items horizontally:
```
#your-wrapper {
/* arrange items side by side: *
display: flex;
/* center items: */
align-items: center;
}
#progress-bar {
/* let item fill the remaining space: */
flex: 1;
/* remove definition of width: */
/* width: 98%; */
}
#progress-text {
/* keep natural width of text: */
flex: 0 0 auto;
}
×

Success!

Help @chrisjchrisj spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.14,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...