Fill Widget

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 fromto numbers
  • fill-delay (optional, default: 0) – How long should the element wait before starting to count


Was this article helpful?