circle with several bars with jquery and css

Asked

Viewed 75 times

1

I’m trying to create a circle with bars inside that accompanies the edge of the circle, I’m hours breaking head with this.

Here’s the code I took all day to make, but that’s not it yet,

$(function(){
		var left = 50, 
			rotate = 0,
			top = 0,
			tX = 0,
			tY = 100;
		for (var i = 0; i <= 32; i++) {
			var li = $('<li>',{class:'bar_'+i});
			li.css({
				'left': left+'%',
				'top': '0',
				'transform': "translateY(-"+tY+"%) translateX("+tX+"px) rotate("+rotate+"deg)",
				'margin-top':top
			});
			top +=  5.46875;
			rotate += 2.8125;
			left += 1.5625;
			tX += 1.5625;
			tY -= 1.5625;
			$('.circle').append(li);
		}

	})
ul.circle { width: 310px; height: 350px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #aaa;
	border-radius: 100%; }
	ul.circle li { position: absolute; width: 3px; height: 100px; background-color: #60f; list-style: none; box-sizing: border-box;
	border: none; margin-left: -1.5px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="circle">			
			
</ul>

Here the code

I want the purple bar to follow the edge of the circle ... ta tried everything, I even thought about doing everything only in css, but I will use 128 bars of this, so styling 128 bars n goes from the right kkk, I wait, hug!

jquery css css3

  • Why do you want to do it using <ul> and <li> ?

  • vdd does not have one because, I just thought it best to use both to manipulate the <li> with jquery

  • I don’t understand the way you want the bars to follow the circle.

  • Dude, what I want to do is like this: http://prntscr.com/ifsf6k,

  • Only in html, jquery and css, I know it’s possible, but I still haven’t figured out how, I’ve been all over the net for something to help me, but I haven’t found anything

  • But what is the manipulation you want with this code? wouldn’t it be more practical to use a svg, canvas or a real image?

  • I thought about it, I know nothing about canvas or svg, I’m thinking I’ll have to do it with pure css msm, Poq n think anything

Show 2 more comments

1 answer

0


You can achieve the effect by using transform-origin: bottom; and a pseudo-element.

Suppose you only have 1 bar in the circle, with height of half the radius + 2%, totalling 52% (the 2% will be the excess that will stay outside the circle) positioned in the middle with the bottom tip coming out of the center:

inserir a descrição da imagem aqui

Generate the various bars by tilting the bottom tip:

inserir a descrição da imagem aqui

You can get the effect. But don’t use ul nor li to do so. These elements have a standard spacing that will get in the way. Even if you can eliminate these spacing by CSS, it’s unnecessary. Use div and span, your code will get much cleaner and accurate.

Another point is that you will need 128 bars to complete the circle with the rotation specified in jQuery.

Behold:

$(function(){
   var rotate = 0;
   for (var i = 0; i <= 128; i++) {
      var li = $('<span>',{class:'bar_'+i});
      li.css('transform','rotate('+rotate+'deg)');
      rotate += 2.8125;
      $('.circle').append(li);
   }
})
div.circle {
   width: 350px;
   height: 350px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

div.circle::after {
   content: '';
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: #aaa;
	border-radius: 100%;
}

div.circle span {
   position: absolute;
   width: 3px;
   height: 52%;
   background-color: #60f;
   left: 50%;
   margin-left: -1.5px;
   transform-origin: bottom;
   top: -2%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle">
</div>

  • That’s what I was trying to do, thank you very much!

Browser other questions tagged jquery css css3

You are not signed in. Login or sign up in order to post.