Awesome

famous-refresh-loader

A spinning pull to refresh loader that can be used with the famous-flex ScrollView.

Screenshot

Demos

Chat demo (source)

Getting started

Install using bower or npm:

bower install famous-refresh-loader

npm install famous-refresh-loader

Usage

var FlexScrollView = require('famous-flex/ScrollView');
var RefreshLoader = require('famous-refresh-loader/RefreshLoader');

// create scrollview with pull to refresh header
var scrollView = new FlexScrollView({
	pullToRefreshHeader: new RefreshLoader({
		pullToRefresh: true,
		size: [undefined, 60],	// 60px height, to activate refresh pull down at least 120px
		pullToRefreshBackgroundColor: 'white'
	})
});
this.add(scrollView);

Options

The following options are supported by the refresh-loader:

var refreshLoader = new RefreshLoader({
	size: [undefined, 100],		// required
	color: '#AAAAAA',			// particle color
    particleCount: 10,			// number of particles
    particleSize: 6,			// size of particle
    rotateVelocity: 0.09,		// rotation velocity
    hideVelocity: 0.05,			// collapse-velocity when hidding
    quickHideVelocity: 0.2,		// quick collapse-velocity when hidding
    pullToRefresh: false,		// enables pull to refresh
    pullToRefreshBackgroundColor: 'white', // color of surfaces which obscures the loader when pulling
    pullToRefreshDirection: 1,	// set to 0 for horizontal pull to refresh
    pullToRefreshFooter: false, // set to true for footer usage
    pullToRefreshFactor: 1.5    // pull 1.5x the size to activate refresh
});

Contribute

If you like this project and want to support it, show some love and give it a star.