Skip to content
This repository has been archived by the owner on Sep 28, 2020. It is now read-only.

Custom progress element #27

Merged
merged 9 commits into from
Jun 11, 2014
Merged

Custom progress element #27

merged 9 commits into from
Jun 11, 2014

Conversation

mdo
Copy link
Owner

@mdo mdo commented Jun 10, 2014

This adds support for a custom <progress> element. There are a few hacks, all explained in the docs, that address Firefox and IE9 support. Should be ready to rock.

screen shot 2014-06-10 at 2 47 40 pm

25%
</span>
</div>
</progress>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing newline 😦

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added—thanks!

@mdo mdo added this to the v2.2.0 milestone Jun 10, 2014
@cvrebert
Copy link

Maybe make the inner text (in this case e.g. "25%") visible?

.progress-bar {
display: inline-block;
height: 1rem;
text-indent: -999rem; /* Simular hiding of value as in native `<progress>` */

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo: "Simular"

@mdo
Copy link
Owner Author

mdo commented Jun 11, 2014

@cvrebert Per the CSS Tricks article, we're screwed on that one because you can't do content: attr(value) on a <progress> and generated content via :before/:after only works on <progress>s in Webkit.

mdo added a commit that referenced this pull request Jun 11, 2014
Custom progress element
@mdo mdo merged commit 06034f2 into gh-pages Jun 11, 2014
@mdo mdo deleted the progress branch June 11, 2014 02:30
@mdo mdo mentioned this pull request Aug 19, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants