title: CSS spinning triangle from center
body: <p>I was wondering if it is possible to make a triangle that spins exactly from the center.</p>
  
  <p><a href="http://codepen.io/DrevanTonder/pen/NNWbJG" rel="nofollow noreferrer">Codepen</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="loader-wrapper"&gt;
      &lt;div class="loader"&gt;&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.loader-wrapper {
    width: 100%;
    height: 100vh;
    background-color: #11e;
  }
  
  @keyframes load {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  .loader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 100px 173.2px 100px;
    border-color: transparent transparent #007bff transparent;
    animation: 4s linear 0s infinite load;
  }
  </code></pre>