Create Circular Action Button With Dotted Border – dotborder.js

Preview:

Description:

dotborder.js is a vanilla JavaScript plugin to create a customizable circular (radial) action with dotted borders.

How to use it:

Create the html for the action button.

<div class="button">
  <span>Action Button</span>
</div>

Make the action button circular.

.button {
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background-color: #fff;
  text-align: center;
}

Insert the JavaScript ‘dotborder.js’ into the document.

<script src="./dotborder.js"></script>

Initialize the plugin and config the dotted borders.

• degrees: The degrees of the button you want to draw
• rate: The rate at which you get dots
• offset: The offset of the circleRadius
• dotSize: The size of the dots
• buttonSize: The size of the button
• dotClass: The class of the dots, use selector without a ‘.’
• buttonClass: The class of the button, use selector without a ‘.’

dotborder({
  degrees: 360,
  rate: 10,
  offset: 10,
  dotSize: 4,
  buttonSize: 200,
  dotClass: 'dot',
  buttonClass: 'button'
})

Apply your own styles to the dotted border.

.dot {
  position: absolute;
  border-radius: 50%;
  background-color: black;
}