progressbar extension won't render properly

[ofek]

# Goals

-----

[=25% "25%"]

mkdocs>=1.1.0
mkdocs-material>=5.1.1
pymdown-extensions>=7.1

markdown_extensions:
  # Built-in
  - markdown.extensions.abbr:
  - markdown.extensions.admonition:
  - markdown.extensions.footnotes:
  - markdown.extensions.tables:
  - markdown.extensions.toc:
      permalink: true
      toc_depth: "2-6"
  # Extra
  - mkdocs-click:
  - mkpatcher:
      location: docs/developer/.scripts
  - pymdownx.arithmatex:
  - pymdownx.betterem:
      smart_enable: all
  - pymdownx.caret:
  - pymdownx.critic:
  - pymdownx.details:
  - pymdownx.emoji:
      # https://github.com/twitter/twemoji
      # https://raw.githubusercontent.com/facelessuser/pymdown-extensions/master/pymdownx/twemoji_db.py
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  - pymdownx.highlight:
      guess_lang: false
      linenums_style: pymdownx-inline
      use_pygments: true
  - pymdownx.inlinehilite:
  - pymdownx.keys:
  - pymdownx.magiclink:
      repo_url_shortener: true
      repo_url_shorthand: true
      social_url_shortener: true
      social_url_shorthand: true
      provider: github
      user: DataDog
      repo: integrations-core
  - pymdownx.mark:
  - pymdownx.progressbar:
  - pymdownx.smartsymbols:
  - pymdownx.snippets:
      base_path: docs/developer/.snippets
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format
        - name: math
          class: arithmatex
          format: !!python/name:pymdownx.arithmatex.fence_mathjax_format
  - pymdownx.tabbed:
  - pymdownx.tasklist:
      custom_checkbox: true
  - pymdownx.tilde:

without recommended css

with recommended css

[facelessuser]

Documentation example should probably be improved for this.

@gir-bot remove S: triage
@gir-bot add T: maintenance, C: docs

[facelessuser]

I'm thinking about just moving progress bars over to using HTML5 progress tags. Then we don't need CSS styling recommendations, but if people want to, they can implement whatever styling they like: #926 (comment).

[ofek]

Good idea!

[facelessuser]

I've updated the documentation with a little note stating that some tweaking may be necessary if injected into a page with additional styling: dab8a7a. Things like using different fonts and other things can make the example break, but by itself, the example works fine.

Examples like this were always just meant to be simple starters. They are not rigorously tested and polished, but just showing what can be done with the plugin and a little styling.

HTML5 progress bars are still a possibility for the future, but I believe I've done all I can with this issue.