Rectangle spinner with rounded corners

Question

I am trying to make loader which will look like this on

CodePen

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.

I tried to make one more layer, which will be making inline radius and to the wrapper, I set border-radius and overflow: hidden.

But, the animation looks horrible And isn't smooth.

Can you please help me, to make this animation better? Or did you create something similar?

UPDATE CODE SASS

I am still experimenting with that.

#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;

HTML

<div id="logoLoader" style="display: none;">
      <div class="c4w-logo">
        <img src="images/c4w-logo-loader.png" />
      </div>
      <div class="logo-inline-corner"></div>
      <div class="loader" style="left:2px; top:0; height:2px; width:0; animation:slide1 1s linear forwards infinite" ></div>
      <div class="loader" style="right:0; top:2px; width:2px; height:0; animation:slide2 1s linear forwards infinite; animation-delay:0.5s"></div>
      <div class="loader" style="right:2px; bottom:0; height:2px; width:0; animation:slide3 1s linear forwards infinite"></div>
      <div class="loader" style="left:0; bottom:2px; width:2px; height:0; animation:slide4 1sl inear forwards infinite; animation-delay:0.5s"></div>
      <div class="logo-background"></div>
</div>

Answer 1

SVG would be the more suitable here. Simply adjust the value of width/height and stroke properties:

svg {
  width: 200px;
  height: 100px;
  margin: 10px;
  overflow: visible;
}

svg>rect {
  stroke:purple;
  fill:transparent;
  stroke-dasharray: 130, 150;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  to {
    stroke-dashoffset: 280;
  }
}

<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" height="100%" width="100%"  rx="20" ry="20" stroke-width="10"/>
</svg>

But it can also be done with CSS. Here is an idea without transparency where the trick is to rotate an element that will cover only the borders and where we will apply clip-path:

.box {
  width:200px;
  height:100px;
  overflow:hidden;
  border-radius:20px;
  position:relative;
  z-index:0;
}
.box:after {
  content:"";
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
  background:#fff;
  border-radius:10px;
}
.box:before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  right:-50%;
  bottom:-50%;
  background:blue;
  clip-path:polygon(0 0,0 100%,100% 0, 100% 100%);
  animation:rotate 1s linear infinite;
}
@keyframes rotate {
  50% {
    transform:rotate(90deg) scaleX(0.5) ;
  }
  100% {
    transform:rotate(180deg);
  }
}

<div class="box">

</div>

To understand the trick, remove the overflow and change some coloration:

.box {
  width:200px;
  height:100px;
  border-radius:20px;
  position:relative;
  z-index:0;
  border:1px solid;
  margin:50px;
}
.box:after {
  content:"";
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
  background:rgba(255,255,255,0.4);
  border-radius:10px;
}
.box:before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  right:-50%;
  bottom:-50%;
  background:blue;
  clip-path:polygon(0 0,0 100%,100% 0, 100% 100%);
  animation:rotate 1s linear infinite;
}
@keyframes rotate {
  50% {
    transform:rotate(90deg) scaleX(0.5) ;
  }
  100% {
    transform:rotate(180deg);
  }
}

<div class="box">

</div>

It can also be done without clip-path and a simple rectangle:

.box {
  width:200px;
  height:100px;
  overflow:hidden;
  border-radius:20px;
  position:relative;
  z-index:0;
}
.box:after {
  content:"";
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
  background:#fff;
  border-radius:10px;
}
.box:before{
  content:"";
  position:absolute;
  top:-100%;
  left:30%;
  right:30%;
  bottom:-100%;
  background:blue;
  animation:rotate 1s linear infinite;
}
@keyframes rotate {
  50% {
    transform:rotate(90deg) scaleX(0.5) ;
  }
  100% {
    transform:rotate(180deg);
  }
}

<div class="box">

</div>