circle with several bars with jquery and css

Question

circle with several bars with jquery and css

Navigation

#1 by (0 votes)

1

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

Here is the code I took all day to do, but it's still not that,

$(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><ulclass="circle">			
			
</ul>

Here the code

I want the purple bar to follow the edge of the circle ... I've tried everything, I even thought of doing everything in the css, but I'm going to use 128 bars of that, so stylize 128 bars n goes right kkk, I'm waiting, hug!

jquery css css3

asked by anonymous 16.02.2018 / 21:56

1 answer

How to join audio files with node js Problems with iReport Designer - No protocol specified

score 0 · Accepted Answer

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

Suppose you have only 1 bar in the circle, with height of half radius + 2% , totaling 52% (the 2% will be excess that will be outside the circle) middle with the low end coming out of the center:

Generatethevariousbarsbytiltingfromthebottomend:

You'llgettheeffect.Butdonotuseulnorliforthis.Theseelementshaveadefaultspacingthatwillgetintheway.EvenifyoucaneliminatethosespacingbyCSS,itisunnecessary.Usedivandspan,yourcodewillbemuchcleanerandaccurate.

Anotherpointisthatyouwillneed128barstocompletethecirclewiththerotationspecifiedinjQuery.

See:

$(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><divclass="circle">
</div>