Which Language Spinner

Developer
Lauren
Size
3,580 Kb
Views
18,216
  1. Which Language Spinner Previews
  2. Which Language Spinner HTML Codes
  3. Which Language Spinner CSS Codes
  4. Which Language Spinner JS Codes

How do I make an which language spinner?

What is a which language spinner? How do you make a which language spinner? This script and codes were developed by Lauren on 18 September 2022, Sunday.

Which Language Spinner Previews
IQ Test

Which Language Spinner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Which Language Spinner</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Balthazar);
* { margin: 0px; padding: 0px; box-sizing: border-box;
}
html, body { font-family: 'Balthazar', serif; border: 0px; width: 100%; height: 100%;
}
h1 { padding: 30px 0px 20px; font-size: 40px; text-align: center;
}
.spinner { margin: 0px auto; position: relative; border-radius: 100%; width: 450px; height: 450px; overflow: hidden;
}
.spinner .choice { display: block; position: absolute;
}
.spinner .choice:after { content: attr(name); display: block; position: absolute; top: 150%; left: 0px; font-size: 20px; text-align: right; width: 100%; transform: rotate(90deg);
}
.spinner .choice span { content: ''; display: block; position: absolute; border-color: red; border-style: solid; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; width: 0px; height: 0px;
}
.spinner .pointer { margin-top: -20px; margin-left: -20px; position: absolute; top: 50%; left: 50%; background: #FFF; border-radius: 100%; width: 40px; height: 40px; transition: all 0.2s linear 0s;
}
.spinner .pointer:after { content: ''; display: block; margin-left: -10px; position: absolute; top: -24px; left: 50%; border: 10px transparent solid; border-bottom: 20px #FFF solid; width: 0px; height: 0px;
}
.spinner .pointer span { z-index: 2; margin-top: -16px; margin-left: -16px; position: absolute; top: 50%; left: 50%; background: #EEE; border-radius: 100%; width: 32px; height: 32px;
}
button { display: block; margin: 20px auto; padding: 5px 10px; background: #DDD; font: 20px 'Balthazar', serif; border: 0px; border-radius: 5px; cursor: pointer; outline: none;
}
button:hover { background: #666; color: #FFF;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Which language?</h1>
<div class="spinner"> <div class="point"></div> <div class="choice" name="Java"><span></span></div> <div class="choice" name="C"><span></span></div> <!--<div class="choice" name="Ruby"><span></span></div>--> <div class="choice" name="Python"><span></span></div> <div class="choice" name="PHP"><span></span></div> <div class="choice" name="JavaScript"><span></span></div> <div class="choice" name="Perl"><span></span></div> <div class="choice" name="Bash"><span></span></div> <div class="choice" name="OCaml"><span></span></div> <div class="pointer"><span></span></div>
</div>
<button>Spin me</button>
<br /> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Which Language Spinner - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Balthazar);
* { margin: 0px; padding: 0px; box-sizing: border-box;
}
html, body { font-family: 'Balthazar', serif; border: 0px; width: 100%; height: 100%;
}
h1 { padding: 30px 0px 20px; font-size: 40px; text-align: center;
}
.spinner { margin: 0px auto; position: relative; border-radius: 100%; width: 450px; height: 450px; overflow: hidden;
}
.spinner .choice { display: block; position: absolute;
}
.spinner .choice:after { content: attr(name); display: block; position: absolute; top: 150%; left: 0px; font-size: 20px; text-align: right; width: 100%; transform: rotate(90deg);
}
.spinner .choice span { content: ''; display: block; position: absolute; border-color: red; border-style: solid; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; width: 0px; height: 0px;
}
.spinner .pointer { margin-top: -20px; margin-left: -20px; position: absolute; top: 50%; left: 50%; background: #FFF; border-radius: 100%; width: 40px; height: 40px; transition: all 0.2s linear 0s;
}
.spinner .pointer:after { content: ''; display: block; margin-left: -10px; position: absolute; top: -24px; left: 50%; border: 10px transparent solid; border-bottom: 20px #FFF solid; width: 0px; height: 0px;
}
.spinner .pointer span { z-index: 2; margin-top: -16px; margin-left: -16px; position: absolute; top: 50%; left: 50%; background: #EEE; border-radius: 100%; width: 32px; height: 32px;
}
button { display: block; margin: 20px auto; padding: 5px 10px; background: #DDD; font: 20px 'Balthazar', serif; border: 0px; border-radius: 5px; cursor: pointer; outline: none;
}
button:hover { background: #666; color: #FFF;
}

Which Language Spinner - Script Codes JS Codes

$(document).ready(function() { var number_of_choices = $('.spinner').children('.choice').length; $('.spinner .choice').each(function(index) { var angle = 2*Math.PI/number_of_choices; var small_angle = (Math.PI - angle)/2; var radius = $('.spinner').width()/2; var width = Math.ceil(radius*Math.sin(angle)/Math.sin(small_angle)); var triangle_height = Math.ceil(radius*Math.sin(small_angle)); var hue = 360/number_of_choices * index; var color = 'hsl(' + hue + ', 80%, 70%)'; $(this).css({ 'left' : (radius - width/2) + 'px', 'background' : color, 'width' : width + 'px', 'height' : (radius - triangle_height) + 'px', 'transform-origin' : width/2 + 'px ' + radius + 'px', 'transform' : 'rotate(' + (angle*180/Math.PI*index) + 'deg)' }); $(this).children('span').css({ 'top' : (radius - triangle_height - 5) + 'px', 'border-top-color' : color, 'border-width' : triangle_height + 'px ' + width/2 + 'px 0px ' + width/2 + 'px ' }); }); $('button').click(function() { spin(); });
});
function spin() { var number_of_choices = $('.spinner').children('.choice').length; var angle = 360/number_of_choices; rotate(angle, 0, (Math.random()*number_of_choices)+number_of_choices); function rotate(degree_incr, index, total) { if (index >= total) { return; } $('.spinner .pointer').css({ 'transform' : 'rotate(' + degree_incr*index + 'deg)', }); setTimeout(function () { var color = 'hsl(' + angle*(index%number_of_choices) + ', 100%, 60%)'; $('.spinner .choice').each(function(i) { if (i == index%number_of_choices) { $(this).css('background', color); $(this).children('span').css('border-top-color', color); } else { var old_color = 'hsl(' + angle*(i%number_of_choices) + ', 80%, 70%)'; $(this).css('background', old_color); $(this).children('span').css('border-top-color', old_color); } }); $('.spinner .pointer span').css('background', color); rotate(degree_incr, index + 1, total); }, 200); }
}
Which Language Spinner - Script Codes
Which Language Spinner - Script Codes
Home Page Home
Developer Lauren
Username phantomesse
Uploaded September 18, 2022
Rating 3
Size 3,580 Kb
Views 18,216
Do you need developer help for Which Language Spinner?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lauren (phantomesse) Script Codes
Name
Flexbox Column Stretch
Dropdown Menu
Multiple Choice Quiz
Sticky Navbar
Custom Dropdown Menu
Selecting Products on a Grid
CSS Flashcard
Magnifying Glass Icon
Hover Map
Simple Dropdown Menu
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!