magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Simple Meter


This lightweight extension creates elegant and fully customizable multipurpose meters.
Beautify your surveys, stats and any number you want!

Some features:

- Multidirectional and responsive.
- Colors, font size, style, weight and opacity for the percentage.
- Auto-hides percentage when is not enough place.
- Custom colors, patterns and opacity for both the base and the meter elements.
- Custom range from 0 to n.
- Initial value; or change it later and update the instance with ease.
- Maximum backward, cross-browser and cross-platform compatibility.
- Really lightweight, no dependencies, no jQuery.


HTML 4.01 Transitional
W3C compliant


DEMO


* Just a brief about some of the changes that were made lately...

* New in version 1.2

- Optional transition for a smoother effect while the extension is being updated (some browsers may not support this feature).
- Optional initial delay until the extension is updated for the first time.

* New in version 1.1

- The value can be shown instead of only the percentage.
- Values use the locale formatting automatically.
- Optional prefix and/or suffix for the percentage or the value shown.
- Code moved to an external library.
- Improved preview on workspace.



How to use?

1. Drag and drop all the extension instances you need.
2. Open the properties dialog and setup the appearance according to your design scheme.
3. The most important parameter is the maximum value and the current value.
4. Preview or publish.

How to update the value?

1.
MyMeter.value = (here the value you want);
2.
MyMeter.update();
3. Replace MyMeter by the actual instance name.

Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with