Lix Components: Loading Button for Wix with Lottie Animations

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

Try Demo

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