Lottie Animation

Lottie is dynamically served in a JSON file. It can render the file across all devices and operating systems. Supports solids, and shape layers, and it occupies minimal space when transformed.

Basic

Lottie JSON

Provide the JSON content that renders the Lottie animation. Use the Lottie Editor to make the animation and export the JSON and load the content here.

Interaction

Speed

Controls the speed at which the animation is played. It can be sped up to 10x times using this property.

Loop

Property	Description
Single Play	Plays the animation only once after loading it.
Endless Loop	Keeps playing the animation in an endless loop.

Animation Start

Property	Description
Auto	Starts to play the animation automatically after loading.
On Hover	The animation is played only after the user hovers the mouse.

Keep Last Frame Displayed

Displays the last frame of the animation static, after playing the entire content.

Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

Set the visibility

Disabled

Disables the user interaction with the element on the page. It visually indicates that the element is inactive and prevents users from interacting with it when applied.

Read-only

Style

Property	Description
Background	Users can change the colour of the widget's background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.
Margin	This value is set in terms of "px" number which creates the space between the border and the content of the widget.
Padding	This value is set in terms of "px" number which creates the space between the border and outer elements.