If you’re looking for a new and different design element to spice up your website, then you might want to consider using CSS Circle. CSS circle is an easy way to create the illusion of a circular object without having any images.
In this article, I’m going to explore a variety of ways to make a circle with CSS and look at how they stack up against each other.
CONTENTS
1. how to make a basic circle in HTML and CSS?
Html Code:
<!--We are using div tags to make directly use of css code-->
<div class="circle"></div>
<!--End of Circle--> CSS Code:
/* CSS Circle */
.circle{
width: 150px;
height:150px;
border-radius: 50%;
background-color: #FC0;
} Explanation:
Here we have taken a <div> element and add a CSS class .circle. We have also set its height and width 150px. To make the div element circle we have to add border-radius: 50%;
2. How to create css circle with border?
Html Code:
<!--We are using div tags to make directly use of css code-->
<div class="circle"></div>
<!--End of Circle--> CSS Code:
.circle{
width: 150px;
height:150px;
border-radius: 50%;
background-color: #FC0;
border: 5px solid green;
}Explanation:
Here we have just added border: 5px solid green; to make a green border around the circle.
3. How to create css circle image?
Html Code:
<img src="image.jpeg" />CSS Code:
img {
width : 150px;
height : 150px;
border-radius : 50%;
} Explanation:
Simple add border-radius : 50%; to make the image circle.
4. How to create css circle progress bar?
Html Code:
<svg>
<circle cx="75" cy="75" r="60" stroke="#428bca" stroke-width="6" fill="#fff" />
</svg> CSS Code:
svg {
transform: rotate(-90deg);
stroke-dasharray: 377; /* (2PI * 60px) */
stroke-dashoffset: 377;
animation: offsettozero 5s linear forwards;
height: 150px;
width: 150px
}
@keyframes offsettozero {
to {
stroke-dashoffset: 0;
}
}Explanation:
In the above example, I have used SVG to make a circular progress bar without using any javascript. The cx, cy is the coordinate value and the r is the radius of that circle.
We have calculated the stroke-dasharray value using (2PI * 60px).
5. How to create a CSS circle with percentages?
Html Code:
<svg class="circle">
<circle r="50" cx="100" cy="100"/>
<path fill="none" stroke-linecap="round" stroke-width="7" stroke="#ffa" stroke-dasharray="250,250"
d="M100 60 A1 1 0 0 1 100 140
A1 1 0 0 1 100 60"/>
<text class="percentage" text-anchor="middle" x="100" y="100">0</text>
</svg>
CSS Code:
.circle {
fill: #ffc107;
width: 150px;
height: 150px;
}
.percentage{
fill: #fff;
font-size: 16px;
}JS Code:
var path = document.querySelector('.circle path');
var text = document.querySelector('.circle .percentage');
var length = path.getTotalLength();
var i = 0;
var count = 0;
var ticks = 50;
setInterval(function() {
if (i < length+length/ticks) {
path.setAttribute('stroke-dasharray', i+","+length);
i+=length/ticks;
text.innerHTML=Math.round((count++/ticks)*100);
}
}, 100);
Explanation:
In our SVG, we have used the circle, path, and text elements. Now by using setInterval() function, we are incrementing the stroke-dasharray value here.
The count variable is used to increment the progress percentage.
Html Code:
<label class="circle" for="toogle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
</label>CSS Code:
.circle {
display: block;
position: relative;
padding: 0;
z-index: 98;
margin: 0 auto;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
border-radius: 50%;
height: 60px;
width: 60px;
background-color: #3F51B5;
transition: 0.2s;
text-align: center;
}
.circle:active {
transform: scale(0.9);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.3);
}
.circle:hover {
cursor: pointer;
background-color: #606fc7;
box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.3);
}
.circle svg {
position: absolute;
top: 50%;
left: 50%;
margin-left: -15px;
margin-top: -15px;
width: 30px;
height: 30px;
transition: 0.5s;
transform: rotate(180deg);
fill: #fff;
}Explanation:
This is a basic code to make a rounded button. Here we have set border-radius and box-shadow to make our button circular and show some shadow outside the button.
In .circle:active pseudo-class, we are using transform: scale(0.9); to scale the button.
7. How to create a CSS circle with the hole?
Html Code:
<div class="holo-circle"></div>CSS Code:
body{
background: #ff0000;
}
.holo-circle{
position:relative;
width:500px; height:200px;
margin:0 auto;
overflow:hidden;
}
.holo-circle:after{
content:'';
position:absolute;
left:175px; top:25px;
border-radius:100%;
width:150px; height:150px;
box-shadow: 0px 0px 0px 2000px #E3DFD2;
}
Explanation:
You can make a div with overflow:hidden and create a round pseudo-element inside it with border-radius. Give it a huge box-shadow, too without background color.
Final Word
I hope that after reading this article, you will be more confident in using Circles in your CSS. And if you have any questions or need help implementing a Circle design, feel free to comment here!
Very good