Radar

index.html

<div id="radar">
  <i>
    <i></i>
  </i>
  <div class="line"></div>
</div>

Radar.markdown

Radar

A Pen by Pavel on CodePen.

License.

script.js

/**
 * Created by PavelCSS on 13.01.15.
 */
var time = 5
var peoples = [
    {
        distance : 50,
        angle    : 30
    },
    {
        distance : 100,
        angle    : 97
    },
    {
        distance : 30,
        angle    : 245
    },
    {
        distance : 110,
        angle    : 310
    },
    {
        distance : 10,
        angle    : 145
    }
];

(function radar(){

    var radius = 150;
    for (i = 0; i < peoples.length; i++) {
        var disX = 90 < peoples[i].angle + 90 < 270 ? radius - peoples[i].distance : radius,
            disY = 180 < peoples[i].angle + 90 < 360 ? radius - peoples[i].distance : radius,
            angleNew = (peoples[i].angle + 90) * Math.PI / 180,
            getDegX = disX + peoples[i].distance - Math.round(peoples[i].distance * Math.cos(angleNew)),
            getDegY = disY + peoples[i].distance - Math.round(peoples[i].distance * Math.sin(angleNew));

        $('#radar').append($('<span>')
            .addClass('dot')
            .css({
                left : getDegX,
                top  : getDegY,
                '-webkit-animation-delay' : time / 360 * peoples[i].angle + 's',
                'animation-delay' : time / 360 * peoples[i].angle + 's'
            })
            .attr({
                'data-atDeg' : peoples[i].angle
            }));
    }

})()

style.css

*{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#radar {
  position: relative;
  width: 300px;
  height: 300px;
  margin: auto;
  background: #222222;
  overflow: hidden;
  border: 2px solid #8ba892;
  -webkit-border-radius: 300px;
  border-radius: 300px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#radar:before,
#radar:after {
  content: '';
  background: rgba(139, 168, 146, 0.15);
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
#radar:before {
  width: 1px;
}
#radar:after {
  height: 1px;
}
#radar i {
  display: block;
  margin: 50px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  border: 1px solid rgba(139, 168, 146, 0.15);
  -webkit-border-radius: 300px;
  border-radius: 300px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#radar .line {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 50%;
  right: 50%;
  z-index: 9999;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-border-radius: 300px 0 0 0;
  border-radius: 300px 0 0 0;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-animation: radar 5s infinite linear;
  animation: radar 5s infinite linear;
  background-image: -webkit-linear-gradient(45deg, rgba(139, 168, 146, 0.01) 0%, rgba(139, 168, 146, 0.01) 50%, #8ba892 100%);
  background-image: linear-gradient(45deg, rgba(139, 168, 146, 0.01) 0%, rgba(139, 168, 146, 0.01) 50%, #8ba892 100%);
}
#radar .line:after {
  content: '';
  background: #8ba892;
  width: 4px;
  height: 4px;
  position: absolute;
  bottom: -2px;
  right: -2px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#radar .dot {
  background: #c5d4c9;
  position: absolute;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  margin-left: -2px;
  opacity: 0.3;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: 0 0 3px 4px #8ba892;
  box-shadow: 0 0 3px 4px #8ba892;
  -webkit-animation: dot_pulse linear 5s infinite;
  animation: dot_pulse linear 5s infinite;
}
@-webkit-keyframes radar {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes dot_pulse {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.1;
  }
}
@-webkit-keyframes dot_pulse {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.1;
  }
}