nickbullll / react-sweet-progress Goto Github PK

Its possible?

Thanks!

Hello. I'm encountering this error when importing the style.css

Uncaught Error: Cannot find module 'react-sweet-progress/lib/style.css'

My component looks like this:

import { Progress } from 'react-sweet-progress'
import 'react-sweet-progress/lib/style.css'

class ProgressModal extends Component {
  render () {
    const { onCloseModal } = this.props
    return (
      <Fragment>
        <ModalBody>
          <Progress percent={88} status='active' />
        </ModalBody>
        <ModalFooter>
          <button disabled onClick={onCloseModal}>
            Please wait a moment
          </button>
        </ModalFooter>
      </Fragment>
    )
  }
}

Love the library! I am using it as an experience like bar for objectives, but would like to request to have the percent instead be a fraction shown on the right of the bar, or in the center of the circle.

So like -----------3/5 instead of -----------60%

Description
I am experiencing an issue where I cannot hide the display value in the SweetProgress component.

Steps to Reproduce
Implement the SweetProgress component as follows:
jsx
Copy code
<SweetProgress
type="line"
percent={((questionsAnswered + 1) / 10) * 100}
status="active"
theme={{
active: {
trailColor: "#d6d6d6",
color: "#b7ff9e",
},
}}
showInfo={false}
/>
Despite setting showInfo={false}, the display value is still shown, and its span takes up space in the UI.

Tried setting the symbol property in the theme to an empty space:
jsx
Copy code
<SweetProgress
type="line"
percent={((questionsAnswered + 1) / 10) * 100}
status="active"
theme={{
active: {
symbol: " ",
trailColor: "#d6d6d6",
color: "#b7ff9e",
},
}}
/>
This hides the display value but the span still occupies space in the UI.

Attempted to hide the span using CSS:
css
Copy code
div.react-sweet-progress-symbol{
display: none;
}
This approach did not work as expected.

Does anyone know how to set it to a specific decimal point? because in my side its showing all the numbers after decimal point

After installing the latest version with npm and run webpack, I got the error:
These dependencies were not found:

• react-sweet-progress in ./assets/js/app.js
• react-sweet-progress/lib/style.css in ./assets/js/app.js
  I thought I had something wrong in webpack or somewhere else. It took me an hour or so to realise that your package does not contain any actual source files apart from some config stuff.
  I used your library in another project before and I didn't encounter this issue. Then I figured out that my another project was using a previous version which is 1.1.0.
  You must have forgotten to upload the src or lib directory to npm with your 1.1.1 update.

in the docs it says it will use default theme if status not specified. but it's actually using 'active' theme..
is it normal?
plus it would be best if we can specify some properties of a theme like symbol in default theme and override only others (so we don't have to customize every theme)
thanks

I suppose RequestAnimationFrame is devil here, but how to keep animation running after tab change.

Anyone get this working with Typescript? Please share your .d.ts.

strokeWidth not working for line progress bar

How i can disable animtion progress

The colored line has "undefined" class when status is success error or default, but when status is "active" the line have class react-sweet-progress-line-inner-status-active. It would be nice to have similar classes on all statuses.