Ring UI Web Module

$84.71 Cyber Monday $99.66

Code reviewed by PieceX
20 Dec,2018
User Guide Document


Ring elements for your UI are very popular in modern webdesign. This project serves
as an easy way to add rings to your website UI without any real programming.
Simply add the markup to HTML and call to javaScript to change the fill and inner
To put content/text around or underneath, that is all unrelated, you can treat this as
a div box and just put your additional content around. Line background color,
foreground color and font color can be set. Using ‘transparent’ is perfectly fine as a
value, as per usual in CSS, so making the background line vanish and only having the
active line is easy.
This tool is mainly written in JavaScript which writes HTML using CSS and SVG for
simple integration in websites.
How to Use:
Uses Jquery.

If you create any tag with the class ‘ring_ui’, this code will create a ring element for
you. This means that even this basic line, will yield a ring element:

All settings are in fact optional, to make the code more robust and usage more
flexible. Using default values when attributes are omitted.
The following example show you all attributes possible:
ring-frontcolor='orange' ring-backcolor='#444' ring-fontsize='64'
> ring-fontcolor='orange' ring-percent='33' > inner content

ring-size: Size in pixels, ring is square.
ring-thickness: The thickness of the line
ring-frontcolor: The color of the line in the foreground, the active percentage line.
ring-backcolor: The color of the background line.
ring-fontsize: Size of the font inside the inner content. In pixels.
ring-fontcolor: Color of the font inside the inner content.
ring-percent: You may set the initial percentage fill here, however this is mostly used
for the dynamic changes.
Colors can be specified in any format that CSS permits.
To change the inner content of the ring, use this call:
ringUI.changeContent(divbox, string of text or html);
You may use any HTML code in the content part. The parameter divbox denotes the
div of the ring_ui class.
> ringUI.changeContent($('#time-sec-ring'), now.getSeconds());
For changing the fill in percent:
ringUI.changePercent(divbox, integer of percentage);
> ringUI.changePercent($('#time-sec-ring'), parseInt((now.getSeconds()/60) *
> 100) );

Highest Price
Lowest Price
Average Price
AI Price Forecast
Start to Communicate (If you want to start communication with the seller about this item, you can start here)
| Apr 18, 2019

Great source Lots of info. Works just like it should.

| Apr 20, 2019

Works perfect.

We use cookies and other technologies to improve your experience on our website and to analyze our traffic. By browsing our website, you consent to our use of cookies and other tracking technologies.

Accept cookies and close this message