angular-md-pull-to-refresh
angular-md-pull-to-refresh gives you an angular directive that can be attached to a scrollable element (such as an md-content) and provides a pull-to-refresh functionality.
How do I use it
-
bower install infomofo/angular-md-pull-to-refresh
-
include the service in your angular module config
var app = angular.module('YourApp',['infomofo.angularMdPullToRefresh']);
-
Use the directive in your html file.
<md-content im-pull-to-refresh refresh-function="refreshFunction()">
See a demo
On a mobile device you can visit our gh-page to see a live demo of a pull-to-refresh gesture.
How do I affect the appearance
Currently the directive injects an md-progress-bar with the md-accent color. You can style the css of the progress-bar or the animation around by modifying the following classes, such as:
.im-pull-to-refresh-progress-bar {
max-height: 5px;
opacity: 1;
}
.im-pull-to-refresh-progress-bar.ng-hide-add.ng-hide-add-active,
.im-pull-to-refresh-progress-bar.ng-hide-remove.ng-hide-remove-active {
-webkit-transition: all linear 0.25s;
transition: all linear 0.25s;
}
.im-pull-to-refresh-progress-bar.ng-hide {
max-height: 0;
opacity: 0;
}