1

I have designed a div more less like floating action buttons: on a button click a strip slides from left to right but I can not style it properly with my knowledge of 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>

And my current 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; }
}

There are couple of issues:

  1. I have fixed the right border radius but it looks ugly on left side enter image description here

  2. The div slides from behind the screen on left which looks ugly and how can I make it slide from smoothly from the FAB button itself?

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

Thinker
  • 5,326
  • 13
  • 61
  • 137

0 Answers0