Bubz Indicator - Demo & Documentation

1. Basic Usage

Simply include the script and add the custom element:

<!-- For development -->
<script src="bubz.js"></script>

<!-- For production (recommended) -->
<script src="bubz.min.js"></script>

<bubz-indicator></bubz-indicator>

2. Custom Text

Change the text using the text attribute:

<bubz-indicator text="WAIT"></bubz-indicator>

3. Custom Color

Change colors using the color attribute:

<bubz-indicator text="PROCESSING" color="#4CAF50"></bubz-indicator>

4. Custom Size

Adjust size using the size attribute (default is 1):

<bubz-indicator text="SMALL" size="0.6"></bubz-indicator>
<bubz-indicator text="LARGE" size="1.5"></bubz-indicator>

5. Custom Speed

Adjust animation speed using the speed attribute (higher = slower):

<bubz-indicator text="FAST" speed="0.5" color="#FF5722"></bubz-indicator>

6. Show/Hide Methods

Control visibility programmatically using .show() and .hide() methods:

// Instantiate like this in the HTML:
// <bubz-indicator id="controlled-loader" text="CONTROL ME" color="#2196F3"></bubz-indicator>
//
// Then in a <script> ...
const loader = document.querySelector('#controlled-loader');
loader.hide(); // Hide with fade out
loader.show(); // Show with fade in

// With callbacks
loader.hide(() => console.log('Hidden!'));
loader.show(() => console.log('Visible!'));

7. Dynamic Updates

Change properties at runtime:

const loader = document.querySelector('#dynamic-loader');
loader.text = 'NEW TEXT';
loader.color = '#FF9800';
loader.size = 1.2;

8. Multiple Instances

You can have multiple loaders on the same page with different configurations:

9. Full Page Overlay

Create a full-page loading overlay:

<div id="overlay" style="position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; z-index: 9999;">
  <bubz-indicator text="LOADING" color="#fff"></bubz-indicator>
</div>

API Reference

Attributes

Attribute	Type	Default	Description
text	String	"LOADING"	The text to display
color	String	"#777"	Base color (hex format)
size	Number	1	Size multiplier
speed	Number	1	Speed multiplier (higher = slower)

Methods

• show(callback) - Show the indicator with fade-in effect
• hide(callback) - Hide the indicator with fade-out effect
• isVisible() - Returns true if visible

Properties

All attributes can also be accessed as JavaScript properties:

loader.text = "NEW TEXT";
loader.color = "#FF0000";
loader.size = 1.5;
loader.speed = 0.8;