javascript - How to draw circle around round image with small circle on outer circle border?

I am creating testimonial slider using html CSS and jquery like this one

I tried using html css bellow is code and screenshot

HTML code :-

  <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport"content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="css/testo.css">
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link href="+Sans|Quicksand" rel="stylesheet">
 <script src="js/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
</head>

<body class="testo-body">
<div class="container-fluid">
 <div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client">
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
   </div>
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <h3>Complex Roy</h3>
    <h5>Web Designer</h5>
    <h6>Logictrix technologies is a good pany. it's give batter products and services.Logictrix technologies is a good p. it's give batter products and services.Logictrix technologies is a good pany. it's give batter products and services. Logictrix technologies is a good pany. it's give batter products and services.</h6>
   </div>
  </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
   <div class="big-cir">
    <center><img class="img-responsive img-circle" id="profile-image" height="250" width="250" src="image/client-1.png"></center> 
    </div>
   </div>
 </div>
</div>
</body>
</html>

CSS :-

.testo-body{
background-color:white;
}
.out-cir{
 margin-top:-23%;
}
.profile{
margin-top:-20.5%;
margin-left:-31%;
}
.client{
background-color:#161e43;
color:white;
margin-top:20%;
}
.blue1{

}
.big-cir{
 background-color:none;
 height:300px;
 width:300px;
 border-radius:50%;
 position:relative;
 border-color:rgb(167,183,254);
 border-style:solid;
 border-width:2px;
 margin-top:-23%;



}

.img-circle {
    border-radius: 50%;
 margin-top:7%;

}

Screenshot Using HTML :-

Now how I can put circle on outer circle line and make them animate ? any suggestion or code will help me a lot

I am creating testimonial slider using html CSS and jquery like this one

I tried using html css bellow is code and screenshot

HTML code :-

  <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport"content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="css/testo.css">
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link href="https://fonts.googleapis./css?family=Open+Sans|Quicksand" rel="stylesheet">
 <script src="js/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
</head>

<body class="testo-body">
<div class="container-fluid">
 <div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client">
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
   </div>
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <h3>Complex Roy</h3>
    <h5>Web Designer</h5>
    <h6>Logictrix technologies is a good pany. it's give batter products and services.Logictrix technologies is a good p. it's give batter products and services.Logictrix technologies is a good pany. it's give batter products and services. Logictrix technologies is a good pany. it's give batter products and services.</h6>
   </div>
  </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
   <div class="big-cir">
    <center><img class="img-responsive img-circle" id="profile-image" height="250" width="250" src="image/client-1.png"></center> 
    </div>
   </div>
 </div>
</div>
</body>
</html>

CSS :-

.testo-body{
background-color:white;
}
.out-cir{
 margin-top:-23%;
}
.profile{
margin-top:-20.5%;
margin-left:-31%;
}
.client{
background-color:#161e43;
color:white;
margin-top:20%;
}
.blue1{

}
.big-cir{
 background-color:none;
 height:300px;
 width:300px;
 border-radius:50%;
 position:relative;
 border-color:rgb(167,183,254);
 border-style:solid;
 border-width:2px;
 margin-top:-23%;



}

.img-circle {
    border-radius: 50%;
 margin-top:7%;

}

Screenshot Using HTML :-

Now how I can put circle on outer circle line and make them animate ? any suggestion or code will help me a lot

Share Improve this question edited May 3, 2017 at 11:01 Gowtham Shiva 3,8752 gold badges13 silver badges29 bronze badges asked May 3, 2017 at 10:40 Varun Naharia 5,39810 gold badges52 silver badges90 bronze badges

You can do it with both Css and Jquery. Use css animation property to animate the 3 dots over the outer-border and jquery to tilde the animation for specific time. – Deepak swain Commented May 3, 2017 at 10:50
@Deepakswain but first how to set dot circle on big outer circle ? – Varun Naharia Commented May 3, 2017 at 11:00
you have to use an image for this. – Deepak swain Commented May 3, 2017 at 11:02
@Deepakswain can please show me code how I can do ? – Varun Naharia Commented May 3, 2017 at 11:03
Ofcourse you dont have to use an image, you make a <div> and make it 10px high and wide and set border-radius to be 5px, you know have a circle. – Brunis Commented May 3, 2017 at 11:03

| Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

You can create small circle on outer big circle using before and after property in css. I have tried this. I am able to create two circle's. hope this helps you to get right way... (I will update if I able to create third one or multiple)

HTML Code:

<div class="testo-body">
   <div class="container-fluid">
      <div class="row">
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
               <h3>Complex Roy</h3>
               <h5>Web Designer</h5>
               <h6>Logictrix technologies is a good pany. it's give batter products and services.Logictrix technologies is a good p. it's give batter products and services.Logictrix technologies is a good pany. it's give batter products and services. Logictrix technologies is a good pany. it's give batter products and services.</h6>
            </div>
         </div>
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client-image">
            <center><img class="img-responsive img-circle" id="profile-image" height="250" width="250" src="http://placehold.it/500x500"></center>
            <div class="big-cir">
               <div class="small-cir"></div>
               <div class="small-cir2"></div>
               <div class="small-cir3"></div>
            </div>
         </div>
      </div>
   </div>

CSS Code:

.testo-body {
   background-color: white;
}

.out-cir {
   margin-top: -23%;
}

.profile {
   margin-top: -20.5%;
   margin-left: -31%;
}

.client {
   background-color: #161e43;
   color: white;
   margin-top: 10%;
}

.blue1 {}

.big-cir {
   height: 300px;
   width: 300px;
   border-radius: 50%;
   position: relative;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   animation: dotmove cubic-bezier(1,0,0,1) 2s infinite;
}

.big-cir > .small-cir {
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   padding: 5px;
   content: "";
   left: 90px; // you may need to change this
}

.big-cir > .small-cir2 {
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   padding: 5px;
   content: "";
   left: 290px;
   top: 130px;
}

.big-cir > .small-cir3 {
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   padding: 5px;
   content: "";
   left: 150px;
   top: 290px;
}

.img-circle {
   margin: 25px;
   position: absolute;
}

.client-image {
   margin-top: -230px;
   margin-left: 10px;
}

@keyframes dotmove {
   from {
      transform: rotate(90deg);
   }
   to {
      transform: rotate(0deg);
   }
}

fiddle: https://jsfiddle/rahul8590/k0y00Lqc/10/

Programmer puzzle solving

javascript - How to draw circle around round image with small circle on outer circle border? - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)