ts-spin-wheel/dist/index.css

A customizable spin wheel component for React with TypeScript, sound, easing, and modal support.

.spin-the-wheel-container{align-items:center;display:inline-block;display:flex;flex-direction:column;height:300px;justify-content:center;position:relative;width:300px}#wheel{background:radial-gradient(circle,#8b0000 0,red 70%,#b30000 100%);border:12px solid red;border-radius:50%;box-shadow:0 0 8px rgba(0,0,0,.8);display:block;height:100%;transition:transform .4s ease-out;width:100%}.relative-wrapper{position:relative}.spin-button{align-items:center;background:#3a2222;border-radius:50%;border-radius:9999px;box-shadow:0 0 0 8px hsla(0,0%,100%,.3),0 0 20px rgba(0,0,0,.6),inset 0 0 8px hsla(0,0%,100%,.2);color:#fff;cursor:pointer;display:flex;font:1.5em Lato,sans-serif;height:30%;justify-content:center;left:50%;margin:-15%;position:absolute;top:50%;transition:transform .3s ease;transition-duration:.1s;transition-property:transform;transition-timing-function:cubic-bezier(0,0,.2,1);user-select:none;width:30%;z-index:10}.spin-button:hover{transform:scale(1.05)}.spin-arrow{border:10px solid transparent;border-bottom:10px solid #fff;border-top:none;position:absolute;top:-17px}.bulb-ring{height:100%;left:0;pointer-events:none;top:0;width:100%;z-index:5}.bulb,.bulb-ring{position:absolute}.bulb{animation:flicker 1.5s infinite;background:radial-gradient(circle,#fefefe,red);border-radius:50%;box-shadow:0 0 8px rgba(255,0,0,.9),0 0 12px hsla(0,100%,89%,.6),0 0 20px rgba(255,0,0,.7);height:12px;left:50%;margin:-6px;top:50%;transform-origin:center;width:12px}@keyframes flicker{0%,to{opacity:1}50%{opacity:.85}}.wheel-base-img{bottom:-45px;left:50%;position:absolute;transform:translateX(-50%);width:80%;z-index:0}.win-modal{align-items:center;background:rgba(0,0,0,.6);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:999}.modal-content{background:#fff;border-radius:12px;padding:2rem;text-align:center}.modal-content h2{font-size:1.25rem;font-weight:700;margin-bottom:1rem}.modal-content button{background-color:#2563eb;border-radius:.5rem;color:#fff;cursor:pointer;margin-top:.5rem;padding:.5rem 1rem}.modal-content button:hover{background-color:#1e40af}