"CSS Radar - No JS used"
Bootstrap 4.1.1 Snippet by joyparker

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit PRO

Questions / Comments: