Ionic-framework: Feature: Add Progress bars

[brandyscarney]

https://www.google.com/design/spec/components/progress-activity.html

http://g.recordit.co/NEQuvntLcF.gif

[ghenry22]

Progress bars as a standard component would be really nice, I would definitely make use of this if the feature was added.

[lordgreg]

+1

[movrack]

Finally for our case we will use progress of html5. We just have to design it for each platform

[Bouzmine]

It would be nice to have an option to integrate it with the navbar, seen in Safari iOS, for example.

[rafaelwdantas]

+1

[ghenry22]

https://github.com/valor-software/ng2-bootstrap

this can be easily included into your ionic2 project and it gives you some decent consistent progress bar styling across platforms. Still a native ionic component would be nice but this definitely works, I have rolled it into my own project so that I could have some nice progress bars for downloads.

[aspidvip]

+1

[sburak]

+1

[jgw96]

Hello everyone! Thanks for the feature request. I'm going to move this issue over to our internal list of feature requests for evaluation. We are continually prioritizing all requests that we receive with outstanding issues. We are extremely grateful for your feedback, but it may not always be our next priority. I'll copy the issue back to this repository when we have begun implementation. Thanks!

[jgw96]

This issue was moved to driftyco/ionic-feature-requests#38

[danielabbatt]

This is something I've been looking around at for a while and looking for a good implementation, out of the box would be amazing.

[salazarr-js]

meanwhile we waiting for the ionic progress bar component, I leave this simple pen with a material design looks, inspired in this css-tricks tutorial and the materialize css indeterminate progress bar

<progress max="{{ maxValue }}" value="{{ value }}"></progress>

.progress, progress[value] {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  display:block;
  height: 10px;
  &::-webkit-progress-bar {
    background-color: lighten( map-get($colors, primary), 35% );
  }
  &::-webkit-progress-value {
    background-color: map-get($colors, primary);
  }
}

in the next days I'll try to make it a sass mixin to improve the use

[realappie]

@brandyscarney I am willing to create a progress bar for android, just want a heads up whether anyone on the team is already working on one before starting!

[brandyscarney]

@realappie It is not currently being worked on. I started progress on it awhile ago but it is so outdated now that it would probably be easier to start from scratch. 🙂

[realappie]

@brandyscarney beside the progress bar having four modes, are there any other requirements? Also the progress bar in the gif is a material design one, are we going to be re-using that for iOS and windows as well or are they supposed to get a different looking loading indicator.

[realappie]

@jgw96 Would you mind re-opening this as your link is invalid ? :(

[brandyscarney]

@realappie I would say the progress bars should follow the Material Design requirements: https://material.io/guidelines/components/progress-activity.html

The first iteration doesn't have to do _everything_, but eventually we want to get there. I think for now we can make them all look the same and then tweak them for iOS / Windows later. The Material Design team has some good documents to refer to: https://docs.google.com/document/d/1lBJkORFeB7y_RMRtXfT4bIdz9PnUYLn0HYtSClayXt4/preview

I was thinking we could have one component ion-progress and then have the following inputs:

type: 'bar' | 'circle' = 'bar';
indicator: 'determinate' | 'indeterminate' | 'buffer' | 'query' = 'determinate';

Since we already use mode for our theming. I'm open to ideas though. 🙂

[realappie]

@brandyscarney No that sounds like a great idea! Also don't we already have an ion-spinner which would be the same as the progress of type circular?

I'm currently busy with the determinate version of the progress bar, the rest will be easy to implement but the animation of this one is tricky !

[realappie]

@brandyscarney I finished the progress bars, but I'm getting some linting errors because I'm using the property left is prohibited. Should I refactor my code or would my code be accepted?

[brandyscarney]

@realappie Very nice! You can submit it and I can leave some edits for you, or I can fix it up. For RTL support we've added some new mixins, so instead of doing left or right we have:

@include position-horizontal($left-value, null);

We have some docs started on this here: https://github.com/AmitMY/ionic-site/blob/a15151f5eb4470fe4ebdbd2978a605019aabcb5d/content/docs/rtl-support/index.md

Don't feel obligated to make it work for RTL though. :smile:

[realappie]

@brandyscarney How do the linting rules actually work? Because the output of the linter is somewhat verbose and I want to understand it so I can contribute to ionic in the future as well.

If you would rather fix it, I will submit a PR :D

[brandyscarney]

@realappie Each linter rule and a description of what they do can be found here: https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md

For right to left support we have just disabled certain properties from being used via PropertySpelling in favor of the mixins. We could probably enhance the linter to provide more information, but this is why it's happening.

[realappie]

@brandyscarney Ah I see, thank you! I will give RTL support a shot but if it takes me too long I will just submit the PR considering I have never done anything with RTL.

[brandyscarney]

Sounds good, feel free to submit the PR and either @AmitMY or I can help out. :smile:

[realappie]

@brandyscarney Maybe change the v2 label to v4? 👍

[phpfs]

Any updates to this? :)

[harshabyloor]

@brandyscarney @realappie Is there working indeterminate progress bar? Can you please share details

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/97