How do I put text into a progress bar in HTML5 with bulma?
3
By default, what you put in between the <progress></progress> tags will not show.
<progress class="progress" value="15" max="100">15%</progress>How would I get the 15% to show? I am using Bulma as a framework.
html css html5 bulma
edited Nov 13 '18 at 10:11
Temani Afif
68.5k93776
asked Nov 13 '18 at 10:07
Oskar SherrahOskar Sherrah
537
add a comment |
3
By default, what you put in between the <progress></progress> tags will not show.
<progress class="progress" value="15" max="100">15%</progress>How would I get the 15% to show? I am using Bulma as a framework.
html css html5 bulma
edited Nov 13 '18 at 10:11
Temani Afif
68.5k93776
asked Nov 13 '18 at 10:07
Oskar SherrahOskar Sherrah
537
Possible duplicate of Bulma progress text in middle
– Sun
Nov 18 '18 at 14:11
add a comment |
3
3
3
By default, what you put in between the <progress></progress> tags will not show.
<progress class="progress" value="15" max="100">15%</progress>How would I get the 15% to show? I am using Bulma as a framework.
html css html5 bulma
edited Nov 13 '18 at 10:11
Temani Afif
68.5k93776
asked Nov 13 '18 at 10:07
Oskar SherrahOskar Sherrah
537
By default, what you put in between the <progress></progress> tags will not show.
<progress class="progress" value="15" max="100">15%</progress>How would I get the 15% to show? I am using Bulma as a framework.
<progress class="progress" value="15" max="100">15%</progress><progress class="progress" value="15" max="100">15%</progress>html css html5 bulma
html css html5 bulma
edited Nov 13 '18 at 10:11
Temani Afif
68.5k93776
asked Nov 13 '18 at 10:07
Oskar SherrahOskar Sherrah
537
edited Nov 13 '18 at 10:11
Temani Afif
68.5k93776
asked Nov 13 '18 at 10:07
Oskar SherrahOskar Sherrah
537
edited Nov 13 '18 at 10:11
Temani Afif
68.5k93776
edited Nov 13 '18 at 10:11
Temani Afif
68.5k93776
edited Nov 13 '18 at 10:11
Temani Afif
68.5k93776
68.5k93776
asked Nov 13 '18 at 10:07
Oskar SherrahOskar Sherrah
537
asked Nov 13 '18 at 10:07
Oskar SherrahOskar Sherrah
537
asked Nov 13 '18 at 10:07
Oskar SherrahOskar Sherrah
537
537
Possible duplicate of Bulma progress text in middle
– Sun
Nov 18 '18 at 14:11
add a comment |
Possible duplicate of Bulma progress text in middle
– Sun
Nov 18 '18 at 14:11
Possible duplicate of Bulma progress text in middle
– Sun
Nov 18 '18 at 14:11
Possible duplicate of Bulma progress text in middle
– Sun
Nov 18 '18 at 14:11
add a comment |
2 Answers
2
active
oldest
votes
3
Use pseudo element and data attribute (works only on chrome ...)
.progress:before {
content:attr(data-text);
}
.progress {
text-align:center;
}<progress class="progress" value="15" max="100" data-text="15%"></progress>Or you can simply consider an extra wrapper:
.progress:before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
}
.progress {
text-align:center;
display:inline-block;
position:relative;
}<div class="progress" data-text="15%"><progress value="15" max="100" ></progress></div>Including bulma:
.progress-container:before {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
top:0;
line-height:1em;
}
.progress-container {
text-align: center;
position: relative;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="progress-container" data-text="15%"><progress class="progress" value="15" max="100"></progress></div>answered Nov 13 '18 at 10:09
Temani AfifTemani Afif
68.5k93776
Doesn't seem to be working for me :/
– Oskar Sherrah
Nov 13 '18 at 10:13
@OskarSherrah yes only on chrome ... I trying to figure out a solution for others
– Temani Afif
Nov 13 '18 at 10:16
@OskarSherrah updated with another solution .. probably not the best but it works
– Temani Afif
Nov 13 '18 at 10:20
Still doesn't seem to work for me, it just made a white space, and after inspecting the output, I didn't see the text there in case it was in white font.
– Oskar Sherrah
Nov 13 '18 at 10:23
@OskarSherrah you are talking about the second solution I shared, right?
– Temani Afif
Nov 13 '18 at 10:24
|
show 6 more comments
0
Wrap you progress with div and add span
(I did not use :after/before and it has to work in all browser)
See fiddle using bulma
<div>
<span>
15%
</span>
<progress class="progress" value="15" max="100" >
</progress>
</div>
CSS:
span{
position: absolute;
top: -2px;
left: 50%;
font-size: 12px;
}
answered Nov 13 '18 at 10:30
לבני מלכהלבני מלכה
9,9221726
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53278520%2fhow-do-i-put-text-into-a-progress-bar-in-html5-with-bulma%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
Use pseudo element and data attribute (works only on chrome ...)
.progress:before {
content:attr(data-text);
}
.progress {
text-align:center;
}<progress class="progress" value="15" max="100" data-text="15%"></progress>Or you can simply consider an extra wrapper:
.progress:before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
}
.progress {
text-align:center;
display:inline-block;
position:relative;
}<div class="progress" data-text="15%"><progress value="15" max="100" ></progress></div>Including bulma:
.progress-container:before {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
top:0;
line-height:1em;
}
.progress-container {
text-align: center;
position: relative;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="progress-container" data-text="15%"><progress class="progress" value="15" max="100"></progress></div>answered Nov 13 '18 at 10:09
Temani AfifTemani Afif
68.5k93776
Doesn't seem to be working for me :/
– Oskar Sherrah
Nov 13 '18 at 10:13
@OskarSherrah yes only on chrome ... I trying to figure out a solution for others
– Temani Afif
Nov 13 '18 at 10:16
@OskarSherrah updated with another solution .. probably not the best but it works
– Temani Afif
Nov 13 '18 at 10:20
Still doesn't seem to work for me, it just made a white space, and after inspecting the output, I didn't see the text there in case it was in white font.
– Oskar Sherrah
Nov 13 '18 at 10:23
@OskarSherrah you are talking about the second solution I shared, right?
– Temani Afif
Nov 13 '18 at 10:24
|
show 6 more comments
3
Use pseudo element and data attribute (works only on chrome ...)
.progress:before {
content:attr(data-text);
}
.progress {
text-align:center;
}<progress class="progress" value="15" max="100" data-text="15%"></progress>Or you can simply consider an extra wrapper:
.progress:before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
}
.progress {
text-align:center;
display:inline-block;
position:relative;
}<div class="progress" data-text="15%"><progress value="15" max="100" ></progress></div>Including bulma:
.progress-container:before {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
top:0;
line-height:1em;
}
.progress-container {
text-align: center;
position: relative;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="progress-container" data-text="15%"><progress class="progress" value="15" max="100"></progress></div>answered Nov 13 '18 at 10:09
Temani AfifTemani Afif
68.5k93776
Doesn't seem to be working for me :/
– Oskar Sherrah
Nov 13 '18 at 10:13
@OskarSherrah yes only on chrome ... I trying to figure out a solution for others
– Temani Afif
Nov 13 '18 at 10:16
@OskarSherrah updated with another solution .. probably not the best but it works
– Temani Afif
Nov 13 '18 at 10:20
Still doesn't seem to work for me, it just made a white space, and after inspecting the output, I didn't see the text there in case it was in white font.
– Oskar Sherrah
Nov 13 '18 at 10:23
@OskarSherrah you are talking about the second solution I shared, right?
– Temani Afif
Nov 13 '18 at 10:24
|
show 6 more comments
3
3
3
Use pseudo element and data attribute (works only on chrome ...)
.progress:before {
content:attr(data-text);
}
.progress {
text-align:center;
}<progress class="progress" value="15" max="100" data-text="15%"></progress>Or you can simply consider an extra wrapper:
.progress:before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
}
.progress {
text-align:center;
display:inline-block;
position:relative;
}<div class="progress" data-text="15%"><progress value="15" max="100" ></progress></div>Including bulma:
.progress-container:before {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
top:0;
line-height:1em;
}
.progress-container {
text-align: center;
position: relative;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="progress-container" data-text="15%"><progress class="progress" value="15" max="100"></progress></div>answered Nov 13 '18 at 10:09
Temani AfifTemani Afif
68.5k93776
Use pseudo element and data attribute (works only on chrome ...)
.progress:before {
content:attr(data-text);
}
.progress {
text-align:center;
}<progress class="progress" value="15" max="100" data-text="15%"></progress>Or you can simply consider an extra wrapper:
.progress:before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
}
.progress {
text-align:center;
display:inline-block;
position:relative;
}<div class="progress" data-text="15%"><progress value="15" max="100" ></progress></div>Including bulma:
.progress-container:before {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
top:0;
line-height:1em;
}
.progress-container {
text-align: center;
position: relative;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="progress-container" data-text="15%"><progress class="progress" value="15" max="100"></progress></div>.progress:before {
content:attr(data-text);
}
.progress {
text-align:center;
}<progress class="progress" value="15" max="100" data-text="15%"></progress>.progress:before {
content:attr(data-text);
}
.progress {
text-align:center;
}<progress class="progress" value="15" max="100" data-text="15%"></progress>.progress:before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
}
.progress {
text-align:center;
display:inline-block;
position:relative;
}<div class="progress" data-text="15%"><progress value="15" max="100" ></progress></div>.progress:before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
}
.progress {
text-align:center;
display:inline-block;
position:relative;
}<div class="progress" data-text="15%"><progress value="15" max="100" ></progress></div>.progress-container:before {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
top:0;
line-height:1em;
}
.progress-container {
text-align: center;
position: relative;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="progress-container" data-text="15%"><progress class="progress" value="15" max="100"></progress></div>.progress-container:before {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
top:0;
line-height:1em;
}
.progress-container {
text-align: center;
position: relative;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="progress-container" data-text="15%"><progress class="progress" value="15" max="100"></progress></div>answered Nov 13 '18 at 10:09
Temani AfifTemani Afif
68.5k93776
edited Nov 21 '18 at 19:21
answered Nov 13 '18 at 10:09
Temani AfifTemani Afif
68.5k93776
answered Nov 13 '18 at 10:09
Temani AfifTemani Afif
68.5k93776
answered Nov 13 '18 at 10:09
Temani AfifTemani Afif
68.5k93776
68.5k93776
Doesn't seem to be working for me :/
– Oskar Sherrah
Nov 13 '18 at 10:13
@OskarSherrah yes only on chrome ... I trying to figure out a solution for others
– Temani Afif
Nov 13 '18 at 10:16
@OskarSherrah updated with another solution .. probably not the best but it works
– Temani Afif
Nov 13 '18 at 10:20
Still doesn't seem to work for me, it just made a white space, and after inspecting the output, I didn't see the text there in case it was in white font.
– Oskar Sherrah
Nov 13 '18 at 10:23
@OskarSherrah you are talking about the second solution I shared, right?
– Temani Afif
Nov 13 '18 at 10:24
|
show 6 more comments
Doesn't seem to be working for me :/
– Oskar Sherrah
Nov 13 '18 at 10:13
@OskarSherrah yes only on chrome ... I trying to figure out a solution for others
– Temani Afif
Nov 13 '18 at 10:16
@OskarSherrah updated with another solution .. probably not the best but it works
– Temani Afif
Nov 13 '18 at 10:20
Still doesn't seem to work for me, it just made a white space, and after inspecting the output, I didn't see the text there in case it was in white font.
– Oskar Sherrah
Nov 13 '18 at 10:23
@OskarSherrah you are talking about the second solution I shared, right?
– Temani Afif
Nov 13 '18 at 10:24
Doesn't seem to be working for me :/
– Oskar Sherrah
Nov 13 '18 at 10:13
Doesn't seem to be working for me :/
– Oskar Sherrah
Nov 13 '18 at 10:13
@OskarSherrah yes only on chrome ... I trying to figure out a solution for others
– Temani Afif
Nov 13 '18 at 10:16
@OskarSherrah yes only on chrome ... I trying to figure out a solution for others
– Temani Afif
Nov 13 '18 at 10:16
@OskarSherrah updated with another solution .. probably not the best but it works
– Temani Afif
Nov 13 '18 at 10:20
@OskarSherrah updated with another solution .. probably not the best but it works
– Temani Afif
Nov 13 '18 at 10:20
Still doesn't seem to work for me, it just made a white space, and after inspecting the output, I didn't see the text there in case it was in white font.
– Oskar Sherrah
Nov 13 '18 at 10:23
Still doesn't seem to work for me, it just made a white space, and after inspecting the output, I didn't see the text there in case it was in white font.
– Oskar Sherrah
Nov 13 '18 at 10:23
@OskarSherrah you are talking about the second solution I shared, right?
– Temani Afif
Nov 13 '18 at 10:24
@OskarSherrah you are talking about the second solution I shared, right?
– Temani Afif
Nov 13 '18 at 10:24
|
show 6 more comments
0
Wrap you progress with div and add span
(I did not use :after/before and it has to work in all browser)
See fiddle using bulma
<div>
<span>
15%
</span>
<progress class="progress" value="15" max="100" >
</progress>
</div>
CSS:
span{
position: absolute;
top: -2px;
left: 50%;
font-size: 12px;
}
answered Nov 13 '18 at 10:30
לבני מלכהלבני מלכה
9,9221726
add a comment |
0
Wrap you progress with div and add span
(I did not use :after/before and it has to work in all browser)
See fiddle using bulma
<div>
<span>
15%
</span>
<progress class="progress" value="15" max="100" >
</progress>
</div>
CSS:
span{
position: absolute;
top: -2px;
left: 50%;
font-size: 12px;
}
answered Nov 13 '18 at 10:30
לבני מלכהלבני מלכה
9,9221726
add a comment |
0
0
0
Wrap you progress with div and add span
(I did not use :after/before and it has to work in all browser)
See fiddle using bulma
<div>
<span>
15%
</span>
<progress class="progress" value="15" max="100" >
</progress>
</div>
CSS:
span{
position: absolute;
top: -2px;
left: 50%;
font-size: 12px;
}
answered Nov 13 '18 at 10:30
לבני מלכהלבני מלכה
9,9221726
Wrap you progress with div and add span
(I did not use :after/before and it has to work in all browser)
See fiddle using bulma
<div>
<span>
15%
</span>
<progress class="progress" value="15" max="100" >
</progress>
</div>
CSS:
span{
position: absolute;
top: -2px;
left: 50%;
font-size: 12px;
}
answered Nov 13 '18 at 10:30
לבני מלכהלבני מלכה
9,9221726
edited Nov 13 '18 at 10:38
answered Nov 13 '18 at 10:30
לבני מלכהלבני מלכה
9,9221726
answered Nov 13 '18 at 10:30
לבני מלכהלבני מלכה
9,9221726
answered Nov 13 '18 at 10:30
לבני מלכהלבני מלכה
9,9221726
9,9221726
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53278520%2fhow-do-i-put-text-into-a-progress-bar-in-html5-with-bulma%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Possible duplicate of Bulma progress text in middle
– Sun
Nov 18 '18 at 14:11