Align Elements Into A Circle - jQuery Incircle

Incircle is a tiny jQuery plugin that positions a group of elements (e.g. an unordered html list) into a circle around the first item.

The typical use of the plugin is to create a radial menu or circular social share widget on the webpage.

How to use it:

1. Load the main JavaScript jquery.incircle.js after loading jQuery.

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/jquery.incircle.js"></script>

2. Attach the function to the elemeng group and done.

<ul id="example">
  <li>Center</li>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>

$(function(){
  $('#example').incircle();
});

3. Customize the circle type. 1 whole, 0.5 half, 0.25 quarter. Default: 1.

$('#example').incircle({
  type : .5
});

4. Specify the distance from the center. Default: 12em.

$('#example').incircle({
  radius : '10em'
});

5. Set the top/left position.

$('#example').incircle({
  top: '200px',
  left: '200px'
});

6. Set the angle at which the animation begins.

$('#example').incircle({
  start : -90
});

7. Set the angle at which the animation begins.

$('#example').incircle({
  start : -90
});

Changelog:

2020-03-21

• JS updated

---

This awesome jQuery plugin is developed by peppelauro. For more Advanced Usages, please check the demo page or visit the official website.