Skip to content

Instantly share code, notes, and snippets.

@vihuvac

vihuvac/Mac-Spinning-Wheel.html

Last active September 9, 2016 05:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vihuvac/8572fdc4ed88bed0dcf2eb81848d098a to your computer and use it in GitHub Desktop.
Save vihuvac/8572fdc4ed88bed0dcf2eb81848d098a to your computer and use it in GitHub Desktop.
Download ZIP
Awesome Mac OS X Spinning Wheel with SCSS
Raw
Mac-Spinning-Wheel.html
<div class="wrapper">
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
<div class="rainbow"></div>
</div>
<div class="dark-wrapper">
<div class="dark"></div>
<div class="dark"></div>
<div class="dark"></div>
<div class="dark"></div>
<div class="dark"></div>
</div>
<div class="high-light"></div>
<div class="emboss"></div>
Raw
Mac-Spinning-Wheel.scss
html, body{
width:100%;
height:100%;
div{ position:absolute; }
}
.wrapper, .emboss, .dark-wrapper{
width:240px;
height:240px;
border-radius:50%;
overflow:hidden;
left: 40px;
top: 40px;
}
.wrapper{ box-shadow:0 8px 8px rgba(0,0,0,0.9); }
.emboss{ box-shadow:0 0 30px rgba(0,0,0,0.5) inset; }
.rainbow{
width: 60px;
height : 60px;
-webkit-transform-origin:right top;
transform-origin:right top;
left: 60px;
top: 120px;
@for $i from 0 through 179 {
&:nth-child(#{$i + 1}){
-webkit-transform:rotate(#{2 * $i}deg) skewX(-85deg);
transform:rotate(#{2 * $i}deg) skewX(-85deg);
background-color:hsl(-2 * $i, 100%, 50%);
}
}
}
.dark-wrapper{
-webkit-animation:rotating 1s linear infinite;
animation:rotating 1s linear infinite;
}
.dark{
width:182px;
height:247px;
top:-4px;
left:-62px;
-webkit-transform-origin:right;
transform-origin:right;
border-radius:50%;
box-shadow:28px -89px 0 0 rgba(0,0,0,0.3);
@for $i from 0 through 4 {
&:nth-child(#{$i + 1}){
-webkit-transform:rotate(#{72 * $i}deg);
transform:rotate(#{72 * $i}deg);
}
}
}
.high-light{
left: 67px;
top: 46px;
background:linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0));
border-radius:190px / 140px;
width:186px;
height:136px;
}
@-webkit-keyframes rotating{
from{ -webkit-transform:rotate(0deg); }
to{ -webkit-transform:rotate(360deg); }
}
@keyframes rotating{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment