Radar scanner effect using jquery

Question

I\'m trying to figure out a possible solution on how to create a radar scanner effect using jquery and css. Essentially, a semi-transparent triangle would rotate around the

Answer 1

CSS only demonstration

HTML:

CSS:

#radar {
    position:relative;
    width:400px;
    height:400px;
    margin:20px auto;
    border:3px solid #0c0;
    background-color:#020;
    border-radius:50%;
}
#radar>* {position:absolute}
.beacon {
    left:50%;
    top:50%;
    border-style:solid;
    border-width:8px 200px 8px 0;
    border-color:transparent;
    margin-top:-8px;
    transform-origin:0 50%;
}
#beacon {border-right-color:#0c0;animation:spin 2s 0s linear infinite}
#beacon-75 {border-right-color:rgba(0,204,0,0.75);animation:spin 2s 0.03s linear infinite}
#beacon-50 {border-right-color:rgba(0,204,0,0.5);animation:spin 2s 0.06s linear infinite}
#beacon-25 {border-right-color:rgba(0,204,0,0.25);animation:spin 2s 0.09s linear infinite}
.circle {
    left:50%;
    top:50%;
    border:1px solid #0c0;
    border-radius:50%;
}
#circle-big {
    width:300px;
    height:300px;
    margin:-150px;
}
#circle-medium {
    width:200px;
    height:200px;
    margin:-100px;
}
#circle-small {
    width:100px;
    height:100px;
    margin:-50px;
}
#dot {
    width:8px;
    height:8px;
    margin:-4px;
    background-color:#0c0;
}
#vertical {
    left:50%;
    top:0;
    bottom:0;
    border-left:1px solid #0c0;
}
#horizontal {
    top:50%;
    left:0;
    right:0;
    border-top:1px solid #0c0;
}

@keyframes spin {
    from {transform:rotate(0)}
    to {transform:rotate(360deg)}
}

Please note that to support some browsers you will need to add vendor prefixes, but this by itself works in IE10 and Firefox.