How to Use the Wheel of Fate Web Component
1. Load the Web Component
Include the JavaScript file in your HTML:
<script src="wheel-of-fate.js"></script>
2. Use the Web Component
Add the <wheel-of-fate> element to your HTML with optional attributes:
- colors: Comma-separated list of colors for the wheel sectors
- labels: Comma-separated list of labels for each sector
- center-label: Text to display in the center of the wheel
- friction: Spin friction - "soft" (6 seconds), "normal" (3 seconds), or "hard" (1 second)
- duration: Custom spin duration in milliseconds (overrides friction)
- labelorientation: Label orientation - "circle" (default, labels follow the circle) or "right" (labels point outward radially, right sector horizontal)
- triangle: Triangle/arrow color (default: #333). Accepts any CSS color value
- url: Set to "true" to enable URL parameter configuration (URL parameters take precedence over attributes)
3. Interaction
- Click on any wheel to spin it!
- Click again while spinning to stop it immediately!
- The arrow on the right points to your fate when the wheel stops
Who owns your personal data
Friction: soft (6 seconds) | Triangle: red | Labels: circle
HTML Usage:
<wheel-of-fate
labels="Meta,Alphabet,Microsoft,Apple,Palantir"
colors="blue,red,green,grey,orange"
friction="soft"
triangle="red"
labelorientation="circle">
</wheel-of-fate>
Your next project uses
Friction: hard (1 second) | Triangle: gold | Labels: right
HTML Usage:
<wheel-of-fate
labels="Web Components,React,Svelte,jQuery,CSS only"
colors="purple,cyan,orange,navy,magenta"
friction="hard"
triangle="gold"
labelorientation="right">
</wheel-of-fate>