title: Rectangle spinner with rounded corners
body: <p>I am trying to make loader which will look like this on </p>
  
  <p><a href="https://codepen.io/PicturElements/pen/ZOwkwv" rel="nofollow noreferrer">CodePen</a></p>
  
  <p>But I need to have rounded borders, and rectangle, not a box. So I will be able to place the logo of our company to the loader.</p>
  
  <p>I tried to make one more layer, which will be making inline radius and to the wrapper, I set <code>border-radius</code> and <code>overflow: hidden</code>.</p>
  
  <p>But, the animation looks horrible And isn't smooth.</p>
  
  <p>Can you please help me, to make this animation better? Or did you create something similar?</p>
  
  <p><strong>UPDATE CODE SASS</strong></p>
  
  <p>I am still experimenting with that.</p>
  
  <pre><code>#logoLoader
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 50px;
    margin-left: -125px;
    margin-top: -32px;
    -webkit-transition: background-color 500ms;
    transition: background-color 500ms;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
    .logo-image-wrapper
      display: inline-block;
      position: absolute;
      width: 100%;
      z-index: 150;
      img 
        width: 100%;
        height: auto;
    .logo-inline-corner
      display: block;
      position: absolute;
      width: calc(100% - 6px);
      height: calc(100% - 6px);
      background-color: #fff;
      border-radius: 5px;
      z-index: 130;
      margin: 3px;
    .logo-background
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #fff;
      z-index: 100;
    .loader
      display: block;
      position: absolute;
      background-color: #8dc63f;
      z-index: 125;
  
  @keyframes slide1
    0%
      border-top-right-radius: 0;
    50%
      width: calc(100% - 2px);
      margin-left: 0;
    99%
      border-top-right-radius: 0;
    100%
      margin-left: 100%;
      border-top-right-radius: 50px;
  
  @keyframes slide2
    0%
      border-top-right-radius: 0;
    50%
      height: calc(100% - 2px);
      margin-top: 0;
    99%
      border-top-right-radius: 0;
    100%
      margin-top: 100%;
      border-bottom-right-radius: 50px;
  
  @keyframes slide3
    0%
      border-top-right-radius: 0;
    50%
      width: calc(100% - 2px);
      margin-right: 0;
    99%
      border-top-right-radius: 0;
    100%
      margin-right: 100%;
      border-bottom-left-radius: 50px;
  
  @keyframes slide4
    0%
      border-top-right-radius: 0;
    50%
      height: calc(100% - 2px); 
      margin-bottom: 0;
    99%
      border-top-right-radius: 0;
    100%
      margin-bottom: 100%;
      border-top-left-radius: 50px;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="logoLoader" style="display: none;"&gt;
        &lt;div class="c4w-logo"&gt;
          &lt;img src="images/c4w-logo-loader.png" /&gt;
        &lt;/div&gt;
        &lt;div class="logo-inline-corner"&gt;&lt;/div&gt;
        &lt;div class="loader" style="left:2px; top:0; height:2px; width:0; animation:slide1 1s linear forwards infinite" &gt;&lt;/div&gt;
        &lt;div class="loader" style="right:0; top:2px; width:2px; height:0; animation:slide2 1s linear forwards infinite; animation-delay:0.5s"&gt;&lt;/div&gt;
        &lt;div class="loader" style="right:2px; bottom:0; height:2px; width:0; animation:slide3 1s linear forwards infinite"&gt;&lt;/div&gt;
        &lt;div class="loader" style="left:0; bottom:2px; width:2px; height:0; animation:slide4 1sl inear forwards infinite; animation-delay:0.5s"&gt;&lt;/div&gt;
        &lt;div class="logo-background"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>