Create Circular Action Button With Dotted Border – dotborder.js

Category: Javascript | July 25, 2018
Author:fugroup
Views Total:504 views
Official Page:Go to website
Last Update:July 25, 2018
License:MIT

Preview:

Create Circular Action Button With Dotted Border – dotborder.js

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;
}

You Might Be Interested In:


Leave a Reply