Creating a dynamic member count progress bar for Discord bot

Other Questions Discord bot
1

Hey everyone! I’m working on a cool feature for my Discord bot using discord.js. I want to add a progress bar that shows how close we are to reaching our server member goal.

For instance, if we’re aiming for 1000 members and we currently have 100, the progress bar should show 10% completion. I’ve been searching online for examples, but most results are about CSS progress bars, which isn’t quite what I need.

Has anyone implemented something similar? I’d love to see some ideas or code snippets on how to achieve this. Maybe using emojis or ASCII characters? Any tips or tricks would be super helpful!

Here’s a basic outline of what I’m thinking:

function updateProgressBar(currentMembers, goalMembers) {
  const progress = (currentMembers / goalMembers) * 100;
  const filledSquares = Math.floor(progress / 10);
  const emptySquares = 10 - filledSquares;
  
  return '█'.repeat(filledSquares) + '▒'.repeat(emptySquares);
}

// Usage example
const progressBar = updateProgressBar(100, 1000);
console.log(`Server Progress: ${progressBar} ${currentMembers}/${goalMembers}`);

Any suggestions on how to improve this or make it more visually appealing? Thanks in advance for your help!

2

hey, ur code looks pretty good! i’ve done smthing similar b4. one thing u could try is using emojis for a more fun look. like :blue_square: and :white_large_square:. also, maybe add a lil message that changes based on progress? like “almost there!” or “we’re just getting started!”. keeps things interesting for members. good luck with ur bot!

3

I’ve actually implemented something similar for my server’s bot, and I found that using Unicode block characters gives a smoother, more professional look than emojis. Here’s what worked well for me:

function createProgressBar(current, goal) {
  const percentage = (current / goal) * 100;
  const progress = Math.round(percentage / 5);
  return `${current}/${goal} [` + `${'\u2588'.repeat(progress)}` + `${'\u2591'.repeat(20 - progress)}] ${percentage.toFixed(1)}%`;
}

This creates a sleek 20-segment bar using full and light shade blocks. It’s visually clean and works well in Discord’s dark mode.

For updating, I’d recommend using Discord.js’s presence update event instead of setInterval. It’s more efficient and updates in real-time:

client.on('guildMemberAdd', (member) => {
  updateProgressBar(member.guild);
});

client.on('guildMemberRemove', (member) => {
  updateProgressBar(member.guild);
});

This way, your bar updates instantly when members join or leave. Just remember to respect Discord’s rate limits when updating channel names frequently.

4

Your approach looks solid! I implemented something similar for my server’s bot. A few tweaks I’d suggest:

  1. Add color to make it pop. Discord supports colored emojis, so you could use green for filled and red for empty.

  2. Include percentage. It’s helpful for quick glance.

  3. Update dynamically. Set up an interval to refresh every few minutes.

Here’s a modified version:

function updateProgressBar(current, goal) {
  const progress = (current / goal) * 100;
  const filled = Math.round(progress / 10);
  const empty = 10 - filled;
  
  return `[${'🟩'.repeat(filled)}${'🟥'.repeat(empty)}] ${progress.toFixed(1)}%`;
}

// Update every 5 minutes
setInterval(() => {
  const bar = updateProgressBar(guild.memberCount, 1000);
  channel.setName(`Progress: ${bar}`);
}, 300000);

This creates a colorful, percentage-included bar that updates automatically. Hope it helps!