cx-loading-widget

Loading Widget

Really simple loading animation widget with responsive width and adjustable size.

Installation

npm install --save cx-loading-widget

Usage Example

var React = require('react');
var LoadingWidget = require('cx-loading-widget'); // 1. require this package
 
var YourComponent = React.createClass({
    render: function () {
        var currentView;
        
        if (this.state.isLoading) {
            currentView = <LoadingWidget size={50} />; // 2. use it. note how size can be changed with a prop value
        } else {
            currentView = <ViewForDataIsLoaded />;
        }
        
        return (
          <div className="YourComponent">
            {currentView}
          </div>
        );
    }
});

Where is CSS?

All cx-* modules use in-line styles so there's no need for managing stylesheets at all.

What about assets? (image, fonts, etc.)

1. Asset files required for this component is located at dist/assets/.
2. Users of this module will need to deploy everything inside dist/assets, if any, to http://example.com/assets/cx-loading-widget/*
3. If you're using AppEx framework, step 2. will be done automatically for you when you build the project.