Turning Wheel

by eprouver

HTML

<div ng-app="spinwheel">
    <div ng-controller="addwheel">
        <form ng-hide="names.length == 12" ng-submit="addname()">
            <p>Add Text to the Wheel Parts</p>
            <input ng-model="newname" type="text" placeholder="add wheel text"/>
            <button type="submit">Add</button>
        </form>
        <button ng-show="names.length == 12" ng-click="spin()">
            Spin
        </button>
        <div class="holder">
            <div class="wheel" ng-style="{webkitTransform: 'rotate('+rot+'deg)'}">
                <ul>
                    <li ng-repeat="i in names" ng-style="{webkitTransform: 'rotate('+$index * 30+'deg) skew(60deg)'}"><a ng-style="{background: 'radial-gradient(transparent 0%, '+i.color+' 0%)'}"><span>{{i.name}}</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

* {
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: arial;
}
html, body {
    height: 100%;
}
.holder {
    top: 50%;
}
.holder .wheel {
    position: absolute;
    top: 16em;
    left: 50%;
    z-index: 10;
    margin-top: -13em;
    margin-left: -13.5em;
    width: 26em;
    height: 26em;
    border-radius: 50%;
    background: transparent;
    opacity: 0;
    -webkit-transition: all 13s ease;
    -moz-transition: all 13s ease;
    transition: all 13s ease;
    -webkit-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -moz-transform: scale(0.1);
    transform: scale(0.1);
    pointer-events: none;
}

 .holder .wheel:after {
    content:".";
    display:block;
    font-size:2em;
    width:6.2em;
    height:6.2em;
    position: absolute;
    left: 50%;
    margin-left: -3.1em;
    top:50%;
    margin-top: -3.1em;
    border-radius: 50%;
    z-index:10;
    color: transparent;
}
.holder .wheel {
    border-radius: 50%;
    opacity: 1;
    -webkit-transition: all 13s ease;
    -moz-transition: all 13s ease;
    transition: all 13s ease;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    pointer-events: auto;
}
.holder .wheel li {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    margin-top: -1.3em;
    margin-left: -10em;
    width: 10em;
    height: 10em;
    font-size: 1.5em;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: rotate(76deg) skew(60deg);
    -moz-transform: rotate(76deg) skew(60deg);
    -ms-transform: rotate(76deg) skew(60deg);
    transform: rotate(76deg) skew(60deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    pointer-events: none;
}
.holder .wheel li a {
    position: absolute;
   ...

JavaScript

function randColor() {
    return ['rgb(',~~(Math.random() * 200), ',',
            ~~(Math.random() * 200), ',',
            ~~(Math.random() * 200), ')'].join('');
}

angular.module('spinwheel', ['ng']).controller('addwheel', function ($scope) {
    $scope.names = [];
    $scope.rot = 0;

    $scope.addname = function () {
        console.log('add');
        $scope.names.push({
            name: $scope.newname,
            color: randColor()
        });
        $scope.newname = '';
    };
    
    $scope.spin = function(){
        $scope.rot = ~~(Math.random() * 360) + $scope.rot + 5000;
    };
});