Progress.css

0/4
1/4
2/4
3/4
4/4

Infinite progress bars just by adding an attribute ✨

A simple and dynamic way to create horizontal and/or circular progress bars in your HTML without javascript.You can customize it however you like, but only one attribute is needed to make the magic happen 😌 🪄

Contribute

🦾 Features

🔨 Getting Started

To start using the Progress.css, follow these steps:

  1. Include the CSS file in your project:

    2. Using npm

    Install:

    npm install progress.css

    And include the file in your html:

    <link rel="stylesheet" href="path/to/progress.css">

    Via CDN

    You can also just include the file in your html via CDN without installing: 

    <link rel="stylesheet" href="https://unpkg.com/progress.css/progress.min.css">

    Or:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/refusado/progress.css/progress.min.css">
  2. Make your element a progress bar:

    3. One by one

    Add the data-pss attribute to your HTML tag and it will become a progress bar. To choose the percentage, type the value of the percentage into the CSS variable --pss-value. ⚠️ Do not put the "%" symbol, just the number.

    <div data-pss style="--pss-value: 94"></div>

    Many at once

    If you want to style several at once, use the data-pss-container attribute on the container of the elements you want to turn into progress bars.

    <div data-pss-container>
  <div style="--pss-value: 25"></div>
  <div style="--pss-value: 50"></div>
  <div style="--pss-value: 75"></div>
  <div style="--pss-value: 100"></div>
</div>
  3. Customize the progress bar:

    4. Horizontal and circular bars

    The data-pss attribute will create a horizontal progress bar by default, but if you want a radial progress bar instead, add the value "rad" to this attribute.

    <div data-pss="rad" style="--pss-value: 30"></div>

    Variables

    These are the CSS variables that define the progress bar settings, they all have a default value but can be changed by reassigning the variable value. This can be done either in the document styles CSS file or with inline CSS.

    Variable Description
    --pss-value Percentage filled. Default: 65
    --pss-left Color of the left fill. Default: #08a33e
    --pss-right Color of the right fill. Default: #DDF4F9
    --pss-center Center color of radial progress bars. Default: #14975a
    --pss-width Radial progress bar width. Default: .4em

    Texts/labels

    To add text to a horizontal progress bar, use the aria-label="[text]" attribute. You can also add the text inside the element's tag, the difference is that this text will not be centered inside the filled part of the bar. It's recommended that you use the first method. 

    <div data-pss style="--pss-value: 48" aria-label="48%"></div>

    For radial progress bars, there is no additional attribute, just place your text inside the element.

    <div data-pss="rad" style="--pss-value: 80">8/10</div>

👥 Contributing

Contributions are welcome! If you'd like to contribute to the project, please follow these steps:

  1. Fork the repository and clone it to your local machine.
  2. Make your changes, whether it's a bug fix, feature enhancement, or documentation improvement.
  3. Test your changes to ensure they work as intended.
  4. Commit your changes with descriptive messages.
  5. Push your changes to your forked repository.
  6. Submit a pull request to the main repository.

Thank you for considering contributing to Progress.css! Your help is greatly appreciated.

🖌 Author

Progress.css was started by Refu, but it is a 100% open source project and anyone can contribute to the development. If you are interested in helping, open your pull request or issue in the github repository.

🔓 License

This project is licensed under the MIT License. See the LICENSE file for more information about the terms of use.

Don't like this page? Edit it!