A visual metaphor for offline enabled webapps to communicate their state with the user.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
depends
svg
.gitignore
README.md
index.html
package.json
sync-status-icon.js

README.md

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.

Getting Started

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>

API

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();