<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-12">
<div class="wrapper">
<div class="center-area">
<div class="radar-body circle-main"></div><!-- radar-body -->
<div class="bg-area">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%"
height="100%" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<g id="Layer_1">
</g>
<g id="Layer_2">
<circle fill="none" stroke="#ffffff" stroke-miterlimit="10" cx="200" cy="200" r="200"/>
<circle fill="none" stroke="#ffffff" stroke-miterlimit="10" cx="200" cy="200" r="161.877"/>
<circle fill="none" stroke="#ffffff" stroke-miterlimit="10" cx="200" cy="200" r="126.703"/>
<circle fill="none" stroke="#ffffff" stroke-miterlimit="10" cx="200" cy="200" r="90.703"/>
<circle fill="none" stroke="#ffffff" stroke-miterlimit="10" cx="200" cy="200" r="54.703"/>
<circle fill="none" stroke="#ffffff" stroke-miterlimit="10" cx="200" cy="200" r="18.703"/>
<line fill="none" stroke="#ffffff" stroke-miterlimit="10" x1="199.5" y1="-2" x2="199.5" y2="401"/>
<line fill="none" stroke="#ffffff" stroke-miterlimit="10" x1="401" y1="199.5" x2="-2" y2="199.5"/>
</g>
</svg>
</div><!-- bg-area -->
<div class="object-pin">
<div class="obj-1">
<button></button>
<div class="span"></div>
<div class="span"></div>
</div>
<div class="obj-2"></div>
<div class="obj-3"></div>
</div>
</div><!-- center-area -->
</div><!-- wrapper -->
</div>
</div>
</div>
/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
html {
box-sizing: border-box;
font-size: 16px;
}
body {
background-color: white;
font-family: "Open Sans", sans-serif;
font-size: 18px;
color: #444;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
margin: 0;
padding: 0;
font-weight: normal;
}
.radar-body {
width: 300px; height: 300px; margin: 0 auto; border-radius: 50%;
}
.circle-main {
background: conic-gradient(rgb(0, 0, 0) 30deg, rgba(255, 0, 0, 1));
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.center-area {
position: relative;
width: 300px;
margin: 0 auto;
}
.bg-area {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.4;
}
.object-pin {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.obj-1 {
position: absolute;
}
.obj-1 {
top: 90px;
left: 70px
}
.obj-2 {
}
.obj-3 {
}
.obj-1 .span {
position: absolute;
top: 0;
left: 0;
border: 0;
width: 15px;
height: 15px;
border-radius: 50%;
-webkit-animation: sploosh 2s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-animation-iteration-count: infinite;
}
.obj-1 .span:nth-child(2) {
-webkit-animation-delay: 8s;
-webkit-animation-duration: 8s;
}
.obj-1 button {
border: 0;
width: 15px;
height: 15px;
border-radius: 50%;
display: block;
background-color: rgb(255, 255, 255);
-webkit-animation: pulse 8s ease-out;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes sploosh {
0% {
box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.7);
}
80% {
background: rgba(66, 166, 223, 0);
}
100% {
box-shadow: 0 0 0 120px rgba(66, 166, 223, 0);
}
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
}
3.3% {
-webkit-transform: scale(1.1);
}
16.5% {
-webkit-transform: scale(1);
}
33% {
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
}
}
