17 Progress Bar Designs17 Progress Bar Designs

17 Progress Bar Designs

Master Tag
Tips & Tricks
Created
Jun 4, 2021 10:15 PM
Usage
dateBetween
empty
Format
floor
Slice
Web Tags
Formula
Design
Database
Cover
17 Progress Bar Designs (1).png

Donate

✂️
What you'll need: 1 property called "Read" and another called "Total Pages". You can change the names of these properties after pasting the formula.
Classic Progress Bar
Classic Progress Bar Formulas
1-5

Classic Slider

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("——————————", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "●" + slice("——————————", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Diamond

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("◆◆◆◆◆◆◆◆◆◆", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "" + slice("◇◇◇◇◇◇◇◇◇◇", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Loading

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("▒▒▒▒▒▒▒▒▒▒", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "|" + slice("░░░░░░░░░░", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Block

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("■■■■■■■■■■", 0, floor(10 * prop("Read") / prop("Total Pages"))) + slice("□□□□□□□□□□", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Bold Bars

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("▌▌▌▌▌▌▌▌▌▌", 0, floor(10 * prop("Read") / prop("Total Pages"))) + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")
6-10

Cube

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("❒❒❒❒❒❒❒❒❒❒", 0, floor(10 * prop("Read") / prop("Total Pages"))) + " ■ " + slice("❒❒❒❒❒❒❒❒❒❒", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Thin Bars Slider

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("||||||||||||||||||||", 0, floor(20 * prop("Read") / prop("Total Pages"))) + "🁢" + slice("||||||||||||||||||||", 0, 20 - floor(20 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Thin Bars

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("||||||||||||||||||||", 0, floor(20 * prop("Read") / prop("Total Pages"))) + "🁢 " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Lines

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("▮▮▮▮▮▮▮▮▮▮", 0, floor(10 * prop("Read") / prop("Total Pages"))) + slice("▯▯▯▯▯▯▯▯▯▯", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Plain Circle

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("⭘⭘⭘⭘⭘⭘⭘⭘⭘⭘", 0, floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")
11-14

Raised Disk Slider

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("❍❍❍❍❍❍❍❍❍❍", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "●" + slice("❍❍❍❍❍❍❍❍❍❍", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Floating Slider

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("▁▁▁▁▁▁▁▁▁▁", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "▅" + slice("▁▁▁▁▁▁▁▁▁▁", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

8-Bit

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("▄▄▄▄▄▄▄▄▄▄", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "▀" + slice("▄▄▄▄▄▄▄▄▄▄", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Dotted

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("፨፨፨፨፨፨፨፨፨፨", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "჻ " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")
15-17

Bubbles

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("⬤⬤⬤⬤⬤⬤⬤⬤⬤⬤", 0, floor(10 * prop("Read") / prop("Total Pages"))) + slice("◯◯◯◯◯◯◯◯◯◯", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Lite-Floating Slider

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("__________", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "▃" + slice("__________", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Levels

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("⠤⠴⠾⠿⠿⠿⠿⠿⠿⠿", 0, floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")
 
✂️
What you'll need: 1 property called "Start Date" and another called "End Date". You can change the names of these properties after pasting the formula.
Date Progress Bar
Date Progress Bar Formulas
1-5

Classic Slider

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "●—————————— 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("——————————", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "●" + slice("——————————", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "——————————● 100%")), "")

Diamond

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "◇◇◇◇◇◇◇◇◇◇ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("◆◆◆◆◆◆◆◆◆◆", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + slice("◇◇◇◇◇◇◇◇◇◇", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "◆◆◆◆◆◆◆◆◆◆ 100%")), "")

Loading

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "|░░░░░░░░░░ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("▒▒▒▒▒▒▒▒▒▒", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "|" + slice("░░░░░░░░░░", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "▒▒▒▒▒▒▒▒▒▒| 100%")), "")

Block

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "⃞⃞⃞⃞⃞⃞⃞⃞⃞⃞ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("■■■■■■■■■■", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + slice("□□□□□□□□□□", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "■■■■■■■■■■ 100%")), "")

Bold Bars

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("▌▌▌▌▌▌▌▌▌▌", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "▌▌▌▌▌▌▌▌▌▌ 100%")), "")
6-10

Cube

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, " ■ ❒❒❒❒❒❒❒❒❒❒ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("❒❒❒❒❒❒❒❒❒❒", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " ■ " + slice("❒❒❒❒❒❒❒❒❒❒", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "❒❒❒❒❒❒❒❒❒❒ ■ 100%")), "")

Thin Bars Slider

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "🁢|||||||||||||||||||| 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("||||||||||||||||||||", 0, floor(20 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "🁢" + slice("||||||||||||||||||||", 0, 20 - floor(20 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "||||||||||||||||||||🁢 100%")), "")

Thin Bars

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("||||||||||||||||||||", 0, floor(20 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "🁢 " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "|||||||||||||||||||| 100%")), "")

Lines

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "▯▯▯▯▯▯▯▯▯▯ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("▮▮▮▮▮▮▮▮▮▮", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + slice("▯▯▯▯▯▯▯▯▯▯", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "▮▮▮▮▮▮▮▮▮▮ 100%")), "")

Plain Circle

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("⭘⭘⭘⭘⭘⭘⭘⭘⭘⭘", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "⭘⭘⭘⭘⭘⭘⭘⭘⭘⭘ 100%")), "")
11-14

Raised Disk Slider

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "●❍❍❍❍❍❍❍❍❍❍ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("❍❍❍❍❍❍❍❍❍❍", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "●" + slice("❍❍❍❍❍❍❍❍❍❍", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "❍❍❍❍❍❍❍❍❍❍● 100%")), "")

Floating Slider

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "▅▁▁▁▁▁▁▁▁▁▁ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("▁▁▁▁▁▁▁▁▁▁", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "▅" + slice("▁▁▁▁▁▁▁▁▁▁", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "▁▁▁▁▁▁▁▁▁▁▅ 100%")), "")

8-Bit

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "▀▄▄▄▄▄▄▄▄▄▄ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("▄▄▄▄▄▄▄▄▄▄", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "▀" + slice("▄▄▄▄▄▄▄▄▄▄", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "▄▄▄▄▄▄▄▄▄▄▀ 100%")), "")

Dotted

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("፨፨፨፨፨፨፨፨፨፨", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "჻ " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "፨፨፨፨፨፨፨፨፨፨ 100%")), "")
 
15-17

Bubbles

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "◯◯◯◯◯◯◯◯◯◯ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("⬤⬤⬤⬤⬤⬤⬤⬤⬤⬤", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + slice("◯◯◯◯◯◯◯◯◯◯", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "⬤⬤⬤⬤⬤⬤⬤⬤⬤⬤ 100%")), "")

Lite Floating Slider

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "▃__________ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("__________", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "▃" + slice("__________", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "__________▃ 100%")), "")

Levels

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("⠤⠴⠾⠿⠿⠿⠿⠿⠿⠿", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "⠤⠴⠾⠿⠿⠿⠿⠿⠿⠿ 100%")), "")