Create Circular Action Button With Dotted Border – dotborder.js

Category: Javascript | July 25, 2018
Views Total:1,698 views
Official Page:Go to website
Last Update:July 25, 2018


Create Circular Action Button With Dotted Border – dotborder.js


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>

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 ‘.’
  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;

You Might Be Interested In:

Leave a Reply