Table of contents

Donut

Need progress bar in the form of a donut? Use donut component to create it.

Create donut

To create progress bar in the form of a donut add data-role="donut" to element. To set value use attribute data-value="...". 


                    <div id="donut1" data-role="donut" data-value="35"></div>

                    <div id="donut2" data-role="donut" data-value="35"
                        data-hole="0" data-stroke="transparent"
                        data-fill="#4CAF50" data-animate="10"></div>

                    <div id="donut3" data-role="donut" data-value="35"
                        data-hole=".6" data-stroke="#f5f5f5" data-fill="#9C27B0"
                        data-animate="10"></div>

                    <div id="donut4" data-role="donut" data-value="35"
                        data-stroke="#F44336" data-fill="#FFC107" data-color="#FFFFFf"
                        data-cap="" data-animate="10" data-background="#4fc3f7"
                        data-font-size="32"></div>

Set and get value

To set or get value you can use component method val(). Also you can set value at runtime with attribute data-value. 



                    <div id="donut" data-role="donut" data-value="35" class="mx-auto"></div>

                    <button class="button" onclick="setDonutNewValue()">Set new value</button>
                    <button class="button" onclick="getDonutValue()">Get value</button>

                    <script>
                        function setDonutNewValue(){
                            var donut = Metro.getPlugin('#donut','donut');
                            donut.val($.random(0, 100));
                        }

                        function getDonutValue(){
                            var donut = Metro.getPlugin('#donut','donut');
                            alert(donut.val());
                        }
                    </script>

Options

Donut component has a number of options. You can use that options to set style and behavior of component.

Options Data-* Default Desc
size data-size 100 The width of component
radius data-radius 50 The radius of donut
hole data-hole .8 The hole size (from 0 to 1)
value data-value 0 The donut value
background data-background #ffffff The donut background color
color data-color #000000 The donut text color
stroke data-stroke #d1d8e7 The donut value stroke color
fill data-fill #49649f The donut value background color
fontSize data-font-size 24 The donut text font size (in px)
total data-total 100 The maximum of donut value
cap data-cap % Additional caption for donut text
animate data-animate 0 Animation factor (from 0 to 10)
showValue data-show-value false if true, value is displayed, false - display percent

Events

When donut works, it generated the numbers of events. You can use callback for this event to behavior with donut. Rules for working with events are described on this page.

Event Data-* Default Desc
onChange(val, el) data-on-change Metro.noop Callback for value change
onDonutCreate(el) data-on-donut-create Metro.noop Callback fired when donut is created 

                    <div data-role="donut"
                        data-value="35"
                        data-on-donut-create="console.log('Donut was created!')"
                        data-on-change="console.log(arguments)"
                    ></div>