Progress bar Using IONIC FRAMEWORK

http://github.hubspot.com/pace/docs/welcome/

You’re welcome

5 Likes

No ideas from me. @WidawskiJ Pace looks awesome.

It is !

In fact you should/could use it as the loading standard in ionic, it works smoothly with angular, and is very customizable.

I’ll make a directive for angularJS with different loading theme if wanted !

3 Likes

@WidawskiJ Go for it. I’d love to see an integration.

Yeah having a progress bar that can easily be customizable would be a good idea. However I will say I’d largely be just CSS for HTML5’s built-in progress element:
http://css-tricks.com/html5-progress-element/ and some documentation of cool things you can do with it.

@Ben and @max, whatcha think?

4 Likes

exactly true. I have found many urls with respect to progress bar finally i thought of using HTML5 built-in element

i.e.,

<progress max="100" value="50"> </progress>
1 Like

Hey Widawski i want to know how we can customize the ionic loading bar by changing its text written over it with some rotating bar as shown in the image below

Ionic loading bar method to show loading :

show: function(opts) {
var defaults = {
content: ‘’,
animation: ‘fade-in’,
showBackdrop: true,
maxWidth: 200,
showDelay: 2000
};

like this ?

.showLoading = function(message) {
  message = message || "Chargement";

  // Show the loading overlay and text
  $rootScope.loading = $ionicLoading.show({

    // The text to display in the loading indicator
    content: '<i class=" ion-loading-c"></i> '+ message,

    // The animation to use
    animation: 'fade-in',

    // Will a dark overlay or backdrop cover the entire view
    showBackdrop: true,

    // The maximum width of the loading indicator
    // Text will be wrapped if longer than maxWidth
    maxWidth: 200,

    // The delay in showing the indicator
    showDelay: 0
  });
};
4 Likes

Thanks a lot @gkielwasser it worked. :smile:

1 Like

Hi @gkielwasser,

How can i apply css on image which is in Content tag.

content: "img src=“img/menu_icon.png”

now i want to apply css on this image.can you tell me how it will done.

Thanks in adavance.

I assume that content: "img src="img/menu_icon.png" is for going inside the loading indicator?

Have you tried something like:

content: '<img class="my-custom-class" ng-src="img/menu_icon.png"/>'
.my-custom-class {
  border : 1px solid black;
}
1 Like

Thanks @Calendee for your response.
your code is working and even with the src tag we can display the image, i think no need of ng-src here.
+1 for your answer.

Hi @Calendee @gkielwasser i am implementing slide box in my project for that i have to apply header.
For those i have refer same Demo as i have got in ionic demos.

i have used this code-

header-bar class=“bar bar-royal bar-header” left-buttons=“leftButtons” right-buttons=“rightButtons”

                    <h1 class="title" style="margin-left: 50px !important; padding: 0 !important; margin-right: 50px !important;"><img src="img/logo_icon.png" style="margin-top: 13.5px;margin-bottom: 13.5px;"></a></h1>

                </header-bar>

in this i m trying to put this image in my center of the header.

so can you tell me how it will done?

Thanks in advance.

FYI : Ion Refresher is updated and allows different content and loading indicators

2 Likes

You might want to open a new topic next time to keep them restrained to a specific issue.

Here’s how you do that:

<ion-view title="navTitle" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true" class="bubble-background">
$scope.navTitle='<img class="title-image" src="images/your-image-name-here.png" />';
2 Likes

Thanks @Calendee for your response.I applied what you suggested but its still not working, when i am replacing header tag to ion-view than header is displaying but leftbutton and rightbutton is not showing.So can you tell me which part i am implementing wrong.

Thanks in advance.

Please open a new topic as this was all about the Progress bar.

Can the progress bar be used like the apple health rings?

Anyway to make that into a circle or ring?

exactly true. I have found many urls with respect to progress bar finally i thought of using HTML5 built-in element. appvn