Fill widget will animate CSS property based on from-to number, its the same as the Counter Widget, but this will handle the styling of element, such as width, height, opacity, position and so on.

Example fill widgets:

 

 

The markup for Fill Widget is:

 

<span data-fill-from=”0″ data-fill-to=”56″ data-fill-unit=”%” data-fill-property=”width” data-fill-duration=”2″ data-fill-easing=”true”></span>

 

The above example will animate the width of the SPAN element from 0 to 56 (percent) within 2 seconds.

 

Full syntax/markup for this widget can be:

 

<div data-fill-from=”int|float” data-fill-to=”int|float” data-fill-property=”width” data-fill-unit=”string” data-fill-duration=”integer” data-fill-easing=”boolean” data-fill-duration=”int|float” data-fill-delay=”int|float”></div>

 

Variables can be filled in these ways:

• fill-from (required) – Starting number, can be with floating point
• fill-to (required) – Ending number, can be with floating point
• fill-property (optional, default: width) – Property to be populated with from-to numbers
• fill-unit (optional, default: %) – String to append after the counting number
• fill-easing (optional) – True or false, whether to count with easing algorithm or not
• fill-duration (optional, default: 2.5) – How long will it take to count from–to numbers
• fill-delay (optional, default: 0) – How long should the element wait before starting to count