Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A visual metaphor for offline enabled webapps to communicate their state with the user.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 depends
Octocat-spinner-32 svg
Octocat-spinner-32 .gitignore
Octocat-spinner-32 README.md
Octocat-spinner-32 index.html
Octocat-spinner-32 package.json
Octocat-spinner-32 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();


Something went wrong with that request. Please try again.