How to move a div in semi circle

Question

here is my .html file

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
    <div id="b" style="position:absolute;"> <img src="assets/Mostly_Cloudy.png" /> </div>
</div>

.css file

.progress{
    position: relative;
    margin-left: 100px;
    margin-top: 35px;
    margin-bottom: -52px;
    float:left;
    text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
  position: relative;
  overflow: hidden; /* Comment this line to understand the trick */
  width: 200px; height: 100px; /* Half circle (overflow) */
  margin-bottom: -14px; /* bring the numbers up */
}
.bar{
  position: absolute;
  top: 0; left: 0;
  width: 200px; height: 200px; /* full circle! */
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #dedede;     /* half gray, */
  border-bottom-color: #ffde3e;  /* half azure */
  border-right-color: #ffde3e;
}

 div#b {
    width: 25%;
}

.ts file

  setTimeout(()=>{
      $(".progress").each(function(){
        var int = 100;
        var $bar = $(this).find(".bar");
        var $img = $(this).find("#b");
        var perc =100;
        $({p:0}).animate({p:perc}, {
          // duration: 1*12*60*60*1000,
          duration: 30*1000,
          easing: "swing",
          step: function(p) {
            $bar.css({
              transform: "rotate("+ (45+(p*1.8)) +"deg)", // 100%=180° so: ° = % * 1.8
              // 45 is to add the needed rotation to have the green borders at the bottom
            });
          }
        });

      $("#b").animate({left: "+="+perc},{
        duration:30*1000,
        easing:"swing"
      });

      });

    },100)

by referring this stack Question i got the idea of rotating but i am not able to move my image along with the rotation.

how to make my image to travel along with the .bar div color.

this image is some where i wanted it to act like seeker for the line

actual image looks like this

Answer 1

Try to make some more modifications. Maybe will be what you expect.

 <div class="barOverflow">
<div class="bar">
<div id="b" style="position:absolute;"> <img src="http://images.clipartpanda.com/clipart-sun-clip_art_image_of_a_bright_sunshine_0071-0902-0318-3204_SMU.jpg" width="50px"/> </div>
    </div>

https://jsfiddle.net/nqc6tw5m/1/

Answer 2

This is one way to do it As per my comment on your post.

FIDDLEJS link

.large {
  position: absolute;
  background-color: red;
  height: 50px;
  width: 200px;
  top: 100px;
  left: 50px;
  transform: rotate(180deg);
  animation-name: rotate;
  animation-duration: 4s;
  /*animation-iteration-count: infinite;*/
  animation-timing-function: linear;
}

@-webkit-keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(180deg);}
}

/* Standard syntax */
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(180deg);}
}

.small {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: green;
  top: 5px;
  left: 5px;
  transform: rotate(-180deg);
  animation-name: rotateCCW;
  animation-timing-function: linear;
  animation-duration: 4s;
  /*animation-iteration-count: infinite;*/
}

@-webkit-keyframes rotateCCW {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-180deg);}
}

/* Standard syntax */
@keyframes rotateCCW {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-180deg);}
}

Answer 3

Here's how you can rotate the image in semi circle. Modified the code from this post - How to make an image move in a circular path using jquery?

var t = 0;

function moveit() {
    t += 0.05;

    var r = -100;
    var xcenter = 100;
    var ycenter = 100;
    var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
    var newTop = Math.floor(ycenter + (r * Math.sin(t)));
    $('#friends').animate({
        top: newTop,
        left: newLeft,
    }, 10, function() {
        if(newLeft<199)
        {
          moveit();
        }
        
    });
}

$(document).ready(function() {
    moveit();
});

#friends { position: absolute; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://jsfiddle.net/img/logo.png" 
id="friends"/>

Answer 4

我用画布方式做了，添加了一些更改。 使用异步帧的香料是更高效的方法。 具有透明背景。

<div class="progress">
    <canvas id="canvas"></canvas>
  <div class="container">
    <img src="http://images.clipartpanda.com/vector-clouds-png-KinejMzkT.png" />
    </div>
</div>

Source on codepen