Progress Bar: "Before & After"

[Syamsudin]

​Hello everyone! As a fellow beginner, I’d like to share some SVG code I developed with the help of Gemini AI.

​This project features a unique visualization: the Before & After Progress Bar. It demonstrates how AppSheet can actually handle layered images or “photo overlays.”

​The Concept

​The “Before & After” concept uses two stacked images: for example, a Black & White photo (Before) and a Full Color photo (After). To achieve this effect, the opacity of the top color layer is controlled by the Progress Bar value.

​Note: For this to work, images must first be converted to Base64 format. Use small size image (250 px x 250 px).

Mobile App link

AppSheet : mobile apps from spreadsheets : Create App Shortcut

hopefully it can provide inspiration.

[Syamsudin]

[Syamsudin]

​How to Create a Before/After Progress Bar in AppSheet

​Follow these steps to integrate your images and create a visual progress comparison:

​1. Prepare Your Images

Prepare two photos (Before and After). You can ask Gemini to generate these images for you to ensure high-quality and consistent results.

​

2. Resize Images

Resize your images (e.g., 250x250 pixels). Resizing is crucial to keep the file size small, as you will be converting them into Base64 format.

​3. Convert to Base64

Convert your resized images to Base64 code using an online converter tool. Once converted, keep the resulting text codes ready.

Convert Images to Base64 Online — Free Encoder & Optimizer | base64-image.de

​4. Create “Before” Virtual Column

Create a new Virtual Column named B64 BEFORE EFFECT 1, set the type to LongText, and use this formula:

concatenate('<image href="PASTE_BASE64_CODE_HERE" width="480" height="480" />',"")

Replace PASTE_BASE64_CODE_HERE with the Base64 code you generated for the “Before” image.

​5. Create “After” Virtual Column

Create a new Virtual Column named B64 AFTER EFFECT 1, set the type to LongText, and use this formula:

concatenate('<image href="PASTE_BASE64_CODE_HERE" width="480" height="480" />',"")

Replace PASTE_BASE64_CODE_HERE with the Base64 code you generated for the “After” image.

​6. Create the SVG Display Column

Create a new Virtual Column (e.g., named DISPLAY SVG) with the type set to Image. Paste your SVG code into this column to render the graphic from SALIN KODE SVG.

Or from here

​Good luck and hope it works!