See a problem with the code? Need a new component? Have feedback? We'd love to hear it all! The success of the Bluemix Design System relies on great people like yourself. Fill out the form below to submit your issue to our GitHub repo.
A member of the Bluemix Design System's team will be in touch within 48 hours.
Your issue, , is now in the bluemix-components repo. Click the issue number to track the progress or make edits to your issue.
We will get back to you within 48 hours. Feel free to reach out to us on one of our slack channels if you have additional questions:
#bluemix-componentscomponents
Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.
<div data-loading class='bx--loading'>
<svg class='bx--loading__svg' viewBox='-75 -75 150 150'>
<circle cx='0' cy='0' r='37.5' />
</svg>
</div>
import mixin from '../misc/mixin';
import createComponent from '../mixins/create-component';
import initComponent from '../mixins/init-component-by-search';
import '../polyfills/array-from';
import '../polyfills/element-matches';
import '../polyfills/object-assign';
import toggleClass from '../polyfills/toggle-class';
class Loading extends mixin(createComponent, initComponent) {
/**
* Spinner indicating loading state.
* @extends CreateComponent
* @extends InitComponentBySearch
* @param {HTMLElement} element The element working as a spinner.
* @param {Object} [options] The component options.
* @param {boolean} [options.active] `true` if this spinner should roll.
*/
constructor(element, options) {
super(element, options);
this.active = this.options.active;
// Initialize spinner
this.set(this.active);
}
/**
* Sets active/inactive state.
* @param {boolean} active `true` if this spinner should roll.
*/
set(active) {
if (typeof active !== 'boolean') {
throw new TypeError('set expects a boolean.');
}
this.active = active;
toggleClass(this.element, 'bx--loading--stop', !this.active);
return this;
}
/**
* Toggles active/inactive state.
* @param {boolean} active `true` if this spinner should roll.
*/
toggle() {
return this.set(!this.active);
}
/**
* @returns {boolean} `true` if this spinner is rolling roll.
*/
isActive() {
return this.active;
}
/**
* The map associating DOM element and spinner instance.
* @member Loading.components
* @type {WeakMap}
*/
static components = new WeakMap();
/**
* The component options.
* If `options` is specified in the constructor, {@linkcode Loading.create .create()}, or {@linkcode Loading.init .init()},
* properties in this object are overriden for the instance being create and how {@linkcode Loading.init .init()} works.
* @member Loading.options
* @type {Object}
* @property {string} selectorInit The CSS selector to find spinners.
*/
static options = {
selectorInit: '[data-loading]',
active: true,
};
}
export default Loading;