Set Text on a Circle using CSS and jQuery

The “incircle” is a lightweight and well developed plugin for jQuery. It is useful to set text on a circle and style it with CSS. You just need to create a list of text, then this plugin arrnage it into a circular/radial view.

Moreover, this plugin comes with multiple options to create circular text. Besides this, you can also wrap any HTML element inside the circle. Likewise, you can define custom size and color for the circle.

[intro_ad]

Plugin Overview and Preview

Plugin: incircle
Author: peppelauro
Category: Text & Input
Published: January 18, 2024
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 6 KB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
4,251
[ad_after_overview]

How to Set Text on a Circle with CSS and jQuery

1. To create “set text on a circle css”, we need to getting started with incircle plugin. So, load the jQuery script file into your HTML page.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. Similarly, include the incircle’s JavaScript file in your HTML document.

<!-- incircle JS -->
<script src="js/jquery.incircle.js"></script>

3. Create HTML unordered list and wrap it inside the div element just like below:

   <div class="circle">
       <ul id="ex3">
    <li><span class="codehim">CodeHim</span></li>
    <li>HTML</li>
    <li>CSS Snippets</li>
    <li>JavaScript</li>
    <li>jQuery Plugins</li>
    <li>Bootstrap</li>
    <li>Plugins</li>
    <li>Code & Scripts</li>
    <li>Templates</li>
       </ul>
   </div>

4. Define some basic CSS styles for circle. Keep its position relative and set the same values for height & width.

.circle{
   position: relative;
   width:500px;
   height:500px;
   margin: 10px auto;
}

5. Finally, call the plugin in jQuery document ready function to active the incircle.

$(document).ready(function(){
	$('#ex3').incircle();
});

Advance Configuration Options

The following are some advanced configuration options to create / customize set text on a circle.

Option Default Type Description
color “#556b2f” String This option define the color for text.

Example:

$('#ex3').incircle({
	color : "#556b2f",
}); 
backgroundColor “white” String It defines the background color for the circle.

Example:

$('#ex3').incircle({
	backgroundColor : "white",
}); 
type 1 Number Defines the type of the circular text. Possible options are: circle type – 1 whole, 0.5 half, 0.25 quarter.

Example:

$('#ex3').incircle({
	type : 1,
}); 
radius “12em” String This option defines the radius from the center.

Example:

$('#ex3').incircle({
	radius : "12em",
}); 
start -90 Number The number value where to start shifting text.

Example:

$('#ex3').incircle({
	start : -90,
}); 
top “200px” String The top absolute value of text element.

Example:

$('#ex3').incircle({
	top : "200px",
}); 
left “200px” String It defines the left position of the text.

Example:

$('#ex3').incircle({
	left : "200px",
}); 
[ad_after_artical]

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X