Elements | Snippets Gallery

1. The Classic Loading Bar

30%

<jl-meter value="30" theme="primary" variant="flat">30%</jl-meter>

2. The 3D Barber Pole

Processing...

<jl-meter value="75" theme="secondary" variant="3d" stripes="true" animated="true" size="lg">Processing...</jl-meter>

3. Minimal Rounded Tracker

<jl-meter value="90" theme="dark" variant="rounded" size="sm"></jl-meter>

4. Critical Alert Progress

CRITICAL

<jl-meter value="99" theme="alert" variant="soft" stripes="true" animated="true">CRITICAL</jl-meter>

5. The Rainbow Dash

COMPLETED

<jl-meter value="100" theme="rainbow" variant="3d" stripes="true">COMPLETED</jl-meter>

1. Standard Primary Action

Submit Form

<jl-button theme="primary" variant="rounded">Submit Form</jl-button>

2. Warning 3D Clicker

Are you sure?

<jl-button theme="warning" variant="3d">Are you sure?</jl-button>

3. Soft Neumorphic Ghost

Cancel

<jl-button theme="dark" variant="soft">Cancel</jl-button>

4. Alert Action

Delete Account

<jl-button theme="alert" variant="flat">Delete Account</jl-button>

5. Success Badge

Save Successfully

<jl-button theme="secondary" variant="3d">Save Successfully</jl-button>

1. Standard Information

Please update your account details.

<jl-alert theme="primary" variant="flat" title="Info" dismissible="true">Please update your account details.</jl-alert>

2. Critical Error (3D Convex)

A critical system failure occurred.

<jl-alert theme="alert" variant="3d" title="Error!" dismissible="false">A critical system failure occurred.</jl-alert>

3. Success Notification (Soft Neumorphic)

Your changes have been saved successfully.

<jl-alert theme="secondary" variant="soft" title="Success!" dismissible="true">Your changes have been saved successfully.</jl-alert>

4. Warning Banner (Rounded)

Your session is about to expire.

<jl-alert theme="warning" variant="rounded" title="Caution" dismissible="true">Your session is about to expire.</jl-alert>

5. Dark Mode Message

This is a subtle dark mode notification.

<jl-alert theme="dark" variant="flat" dismissible="true">This is a subtle dark mode notification.</jl-alert>

1. Standard macOS Window

const x = 42;

<jl-code theme="dark" variant="flat" mac-frame="true" language="js">const x = 42;</jl-code>

2. Plain Flat Block

echo "Hello World"

<jl-code theme="dark" variant="flat" mac-frame="false">echo "Hello World"</jl-code>

3. Soft Neumorphic Dark

print("Neumorphic code block")

<jl-code theme="dark" variant="soft" mac-frame="true" language="python">print("Neumorphic code block")</jl-code>

4. Light Theme Code

body { color: blue; }

<jl-code theme="primary" variant="flat" mac-frame="true" language="css">body { color: blue; }</jl-code>

5. 3D Beveled Code Window

<jl-code theme="dark" variant="3d" mac-frame="true" language="html"><div class="box"></div></jl-code>

1. Standard Primary Popup

Open Popup

Hello

This is a standard flat popup.

<jl-button onclick="...">Open</jl-button> <jl-popup id="p1" theme="primary" variant="flat">...</jl-popup>

2. Dark Mode 3D Modal

Open 3D Modal

Confirm

Are you sure you want to proceed?

<jl-popup theme="dark" variant="3d">...</jl-popup>

3. Alert Error Dialog

Show Error

Fatal Error

Something went terribly wrong.

<jl-popup theme="alert" variant="rounded">...</jl-popup>

4. Soft Neumorphic Dialog

Open Soft Modal

Soft Modal

This is a soft neumorphic styled popup.

<jl-popup theme="secondary" variant="soft">...</jl-popup>

5. Custom Rainbow Modal

Rainbow Dialog

Winner!

You have won the prize.

<jl-popup theme="rainbow" variant="3d">...</jl-popup>

Elements Snippets

Meters