Live Chat

We'll need to share your messages (and your email address if you're logged in) with our live chat provider, Drift. Here's their privacy policy.

If you don't want to do this, you can email us instead at contact@anvil.works.

Toggle Switch and Progress Bar

Author: David Wylie

Clone


This library contains two useful UI components: a sliding toggle switch

and a progress bar

Each is a component that can be dragged onto the page from the Toolbox.

The progress bar is highly configurable; play with the settings in the example app to explore. Each of the TextBoxes configures a property of the ProgressBar component, so all of these settings can be controlled programmatically.

The bar’s style can be ‘smooth’:

Or ‘block’:

In ‘block’ style, the size of the blocks and the spacing between them can be configured.

This library is completely free to use, so click on the clone link and use it in your app!

Clone


You can use it from another app by using the App Dependencies dialog.

When you clone the library, you will also get an example app that shows you how to include it and make use of it.

How it works

Each component has a set of setters and getters for its properties. When each property is updated, an update method is called, that draws the component on a Canvas.

The ToggleSwitch’s smooth sliding animation is accomplished using a Timer. The Timer’s period is 0 normally, meaning it does not tick. But when the ToggleSwitch animation is running, the Timer’s period is set to 0.1. This is the time between each frame of the animation. Every time the Timer’s tick event fires, the canvas is re-drawn with the next frame of the animation.