Wheel Spinner
Add your options and spin the wheel for a random result. Perfect for decisions, giveaways, classroom games, and team picks.
About Wheel Spinner
The Wheel Spinner is an interactive decision tool that helps you pick a random option from a list. Add as many options as you like, then click Spin to start an animated spin that lands on a random result. It's great for classroom activities, giveaways, choosing restaurants, assigning tasks, or any situation where you need a fair random pick.
Features
- Animated spin - Smooth eased animation with a realistic deceleration.
- Custom options - Add, edit, or remove options at any time.
- Color-coded - Each segment gets a distinct color for easy reading.
- Up to 20 options - Supports up to 20 equally-sized segments.
How to Use
- Add options by typing in the Add Option field and pressing Enter or clicking Add.
- Delete options by clicking the × next to any item.
- Click Spin! - the wheel spins with animation and lands on a random option.
- The winner is highlighted and shown in the result box.
- Optionally enable Remove after spin to eliminate the winner from future spins.
How It Works
The wheel is drawn on an HTML canvas, divided into equal segments (one per option). On spin, a random angle is selected using Math.random() and the wheel decelerates to that position using a CSS animation. The winning segment is determined by the final resting angle.
Example
Add team members' names for a random task assignment: "Alice, Bob, Carol, Dave". Spin to randomly pick who presents first. Enable "Remove after spin" so each person gets a turn before anyone repeats.
FAQ
crypto.getRandomValues() before the animation starts. The spin animation simply visualizes the pre-determined result.