Hexagon, Octagon, Dodecagon

Hexagon,-Octagon,-Dodecagon.markdown

Hexagon, Octagon, Dodecagon

endless animation circular motion loading, flat design

A Pen by Shandy on CodePen.

License.

index.html

  <div class="octa"></div>
  <div class="child" id="oct_one"></div>
  <div class="child" id="oct_two"></div>
  <div class="child" id="oct_three"></div>
  <div class="child" id="oct_four"></div>
  <div class="child" id="oct_five"></div>
  <div class="child" id="oct_six"></div>
  <div class="child" id="oct_seven"></div>
  <div class="child" id="oct_eight"></div>

	<div class="hexa"></div>
  <div class="child hexagon" id="hex_one"></div>
  <div class="child hexagon" id="hex_two"></div>
  <div class="child hexagon" id="hex_three"></div>
  <div class="child hexagon" id="hex_four"></div>
  <div class="child hexagon" id="hex_five"></div>
  <div class="child hexagon" id="hex_six"></div>

	<div class="deca"></div>
  <div class="child decagon" id="dec_one"></div>
  <div class="child decagon" id="dec_two"></div>
  <div class="child decagon" id="dec_three"></div>
  <div class="child decagon" id="dec_four"></div>
  <div class="child decagon" id="dec_five"></div>
  <div class="child decagon" id="dec_six"></div>
  <div class="child decagon" id="dec_seven"></div>
  <div class="child decagon" id="dec_eight"></div>
  <div class="child decagon" id="dec_nine"></div>
  <div class="child decagon" id="dec_ten"></div>
  <div class="child decagon" id="dec_eleven"></div>
  <div class="child decagon" id="dec_twelve"></div>

style.css

@keyframes rotateHexa {
  17% {transform: translate(75px, 0);}
  33% {transform: translate(100px, 50px);}
  50%{transform: translate(75px, 100px);}
  67%{transform: translate(0, 100px);}
  83%{transform: translate(-25px, 50px);}
  100%{transform: translate(0,0);}
}

@keyframes rotateOcta {
  12.5%{transform: translate(50px, 0);}
  25%{transform: translate(75px, 25px);}
  37.5%{transform: translate(75px, 75px);}
  50%{transform: translate(50px, 100px);}
  62.5%{transform: translate(0, 100px);}
  75%{transform: translate(-25px, 75px);}
  87.5%{transform: translate(-25px, 25px);}
  100%{transform: translate(0,0);}
}

@keyframes rotateDeca {
  8.33%{transform: translate(25px, 15px);}
  16.66%{transform: translate(40px, 40px);}
  24.99%{transform: translate(40px, 65px);}
  33.33%{transform: translate(25px, 85px);}
  41.66%{transform: translate(0, 100px);}
  49.99%{transform: translate(-25px, 100px);}
  58.33%{transform: translate(-50px, 85px);}
  66.66%{transform: translate(-65px,65px);}
  74.99%{transform: translate(-65px,40px);}
  83.33%{transform: translate(-50px,15px);}
  91.66%{transform: translate(-25px,0);}
  100%{transform: translate(0, 0);}
}

.octa {
    width: 11px;
    height: 11px;
    position: absolute;
    border-radius: 100%;
    background-color: #FF73B8;
    top: 30%; 
    left: 47.5%;
    animation: 
    rotateOcta 5s linear infinite;
    }

.hexa {
    width: 11px;
    height: 11px;
    position: absolute;
    border-radius: 100%;
    background-color: #D5FB52;
    top: 30%; 
    left: 12.5%;
    animation: 
    rotateHexa 5s linear infinite;
}

.deca {
    width: 11px;
    height: 11px;
    position: absolute;
    border-radius: 100%;
    background-color: #FF9600;
    top: 30%; 
    left: 85%;
    animation: 
    rotateDeca 5s linear infinite;
}

.child {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  rgba(255, 255, 255, 0);
  border-style: solid;
  border-width: 1px;
  border-color: #FF95C9;
  top: 30%;
  left: 47.5%;
  z-index: -1;
    }

.hexagon{
  top: 30%;
  left: 12.5%;
  border-color: #F1FDB0;
}

.decagon{
  top: 30%;
  left: 85%;
  border-color: #FFB273;
}

#hex_two { margin-left: 75px;}
#hex_three {margin-left: 100px; margin-top: 50px;}
#hex_four {margin-left: 75px; margin-top: 100px;}
#hex_five {margin-top: 100px;}
#hex_six { margin-top: 50px;margin-left: -25px;}

#oct_two {margin-left: 50px;}
#oct_three {margin-left: 75px;margin-top: 25px;}
#oct_four {margin-left: 75px;margin-top: 75px;}
#oct_five {margin-left: 50px; margin-top: 100px;}
#oct_six {margin-top: 100px;margin-left: 0px;}
#oct_seven{ margin-top: 75px; margin-left: -25px;}
#oct_eight{ margin-top: 25px; margin-left: -25px;}

#dec_two {margin-left: 25px; margin-top: 15px;}
#dec_three{margin-left: 40px; margin-top: 40px;} 
#dec_four{margin-left:40px; margin-top: 65px;}
#dec_five{margin-left:25px; margin-top: 85px;}
#dec_six{margin-top: 100px;}
#dec_seven {margin-left: -25px;margin-top:100px;}
#dec_eight{margin-left: -50px;margin-top:85px; }
#dec_nine{margin-left: -65px;margin-top: 65px; }
#dec_ten{margin-left: -65px; margin-top: 40px; }
#dec_eleven{margin-left: -50px; margin-top: 15px; }
#dec_twelve{margin-left: -25px;}

html {
  background: #453A36;
}