sync-status-icon

Icon that represents the status of a pouchdb sync, online/offline

sync-status-icon

The idea of this project is to create a visual metaphor for offline enabled webapps to communicate their state with the user.

demo

It revolves around the already published offline & storage icon produced by the w3, available here: http://www.w3.org/html/logo/.

It is in the spirit of spin.js in that is uses no images, and should be easy to integrate with your own project.

Using requirejs?

jam install sync-status-icon
 
define(['sync-status-icon'], SyncIcon) {
 
}

Using npm?

npm install sync-status-icon
 
var SyncIcon = require('sync-status-icon');

Browser

<script type="text/javascript" src="sync-status-icon.js"></script>
var sync_icon = new SyncIcon('sync');
 
// respond to the user clicking the icon
sync_icon.click(function(){
    var current_state = sync_icon.getState();
    // maybe if disabled, enable offline support?
})
 
// visually represent what state your webapp is in
sync_icon.disabled();
sync_icon.online();
sync_icon.offline();
sync_icon.syncing();