A Pen by Tryon Eggleston.

CSS-Woven-Star.markdown

CSS Woven Star

Based on https://dribbble.com/shots/1691328-Woven-star

A Pen by Tryon Eggleston on CodePen.

License.

index.html

<div class='loading'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

style.scss

@import "compass/css3";
$r: 100;

$pi: 3.14159265358979323846;
$total: 12;

.loading{
  position:absolute;
  top: 50%;
  left: 50%;
  margin-top: -#{$r}px;
  margin-left: -#{$r}px;
  width: $r * 2px;
  height: $r * 2px;
  animation: loader 140s linear infinite;
  
  div{
    background: #005288;
    width: 134px;
    height: 15px;
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
    animation-iteration-count: infinite;
    animation-duration: 10s;
    position:absolute;   
    transform: rotate(-45deg);
    transform-origin: 50% 50%;    
    border: 3px solid #fff;
   
    $i: $total;
    @while $i > 0 {

      $x: (($r*.60) * cos( (( 360 / $total )* $i) * $pi / 180)) + 50;
      $y: (($r*.60) * sin( (( 360 / $total )* $i) * $pi / 180)) + 92;
      
      
      &:nth-of-type( #{$i} ){ 
        top: #{$y}px ; 
        left: #{$x}px;
        animation-name: bars-#{$i};
        
      }
      $i: $i - 1;
    }    
  }
}


@keyframes loader {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }  
}
$i: $total;
@while $i > 0 {
  $offset: ((360/$total) * $i) + 90 ;
  @keyframes bars-#{$i} {
    0% { transform: rotate($offset + 0deg); }
    25% { transform: rotate($offset + 180deg); }
    50% { transform: rotate($offset + 180deg); }
    75% { transform: rotate($offset + 360deg); }
    100% { transform: rotate($offset + 360deg); }  
  }
  $i: $i - 1; 
}