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