单击按钮时滑动div的CSS

Question

我设计的div更像是浮动动作按钮：在按钮上单击一个从左到右滑动的条带，但我不能用我对css的知识来正确设置它。

 <div class="progress  mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet">
  <button style="float: left;" mdl-button mdl-button-type="mini-fab" (click)="toggleSliding()">
    <mdl-icon>check_circle</mdl-icon>
  </button>
  <div *ngIf="showProgress" class="progress-sliding">TEST</div>
</div>

我现在的css：

.progress{
    height: 5vh;
}
.progress-sliding{
    position: relative;
    background-color: #F5F5F5;
    height: 6vh;
    display: -webkit-box;
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;

    left: -1500px;
    -webkit-animation: slide 0.6s forwards;
    -webkit-animation-delay: 0s;
    animation: slide 0.6s forwards;
    animation-delay: 0s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

有几个问题：

1. 我修正了右边框半径，但左边看起来很难看

2. div从左侧的屏幕后面滑动，看起来很难看，如何让它从FAB按钮本身顺利滑动？

Plunkr：https://plnkr.co/edit/fhFoEqbiXt2cEVQOzzJP?p=preview