top of page
Writer's pictureChristopher Derrell

Lix Components: Loading Button for Wix with Lottie Animations

Updated: Dec 4, 2023

Getting Started with the Lix Loading Button


 

About


The Lix Loading Button allows Wix Website Creators to interactively handle loading tasks when visitors have clicked a button during a tasks so they understand a task is happening.


The Loading Button allows the designer to customize buttons in the website in the same way that they would handle a default Wix Button, allowing them to add from over 1000 animations from the Lottie Files website


This component from the Lix library of components allows experienced web designers & Velo developers to make their websites stand out that much more through fine-tuned attributes that control how their Loading Button works.


⚠️ This component currently only works on Wix Classic Editor websites

Demo



You can learn how to use this component at https://www.threedsoftware.com/lix-components/loading-button




Quick Start


The recommended way to get started is to add the button to your site through the auto-installation link http://wix.to/4CCRoEP 📩


This link will allow you to install the component on your site.


How To Setup Guide


Widget API


Properties/Attributes


​Property

Name

Description

Type

Default

speedInMillis

Speed (milliseconds)

The time between each frame in the animation. This is measured in milliseconds. The min is 20 ms (default), the max is 5000 ms.

Number

20

lottieURL

The Lottie Animation URL

The Lottie Animation URL represents the public JSON URL for a Lottie files animation.

string

undefined

numLoops

Number of Loops

Controls the number of loops until the end of the animation. Used for hard coding an animation. Max loops - 200. Default is 0, which loads indefinitely.

number

0

debugMode

Debug Mode

If Debug Mode is set to true, all the logs will come out in your console for Events.

boolean

false

buttonLabel

Button Label

The label which shows up on the loading button.

string

""



Events


The following events are exposed and can be listened to via addEventListener calls.


Name

Description

click

Event which handles each single click of the Loading Button.

dblClick

Event which handles each double click of the button.

hover

Handles when a user hovers over the button. Triggers on both hover over and when leaving the button. To differentiate, you can use the passed data.



Functions


Function

Function Name

Param

resetButton

Resets button

isLoading

Returns whether or not the button is currently loading

stop

Stops animation


288 views2 comments

Recent Posts

See All

2 Comments


Quentin Plomteux
Quentin Plomteux
May 27, 2022

Really nice and neat component! GJ I will use that one Ps: your tango element is too small we can't see the step in the iFrame

Like
Replying to

Thanks Quentin, appreciate that from you! I'll make that fix to the

Like
bottom of page