How to make the spinner ends rounded?

Asked Jul 19 '17 at 16:53

Active Jul 19 '17 at 17:00

Viewed 223 times

How to make the ends rounded in my spinner? I have this spinner

I need something like this Required

  &__spinner {
    font-size: 14px;
    display: inline-block;
    font-weight: normal;
    color: rgba($brand-primary-darker, .5);
    white-space: nowrap;
    padding: 0 20px 23px 0;

    &::after {
      display: inline-block;
      vertical-align: middle;
      content: '';
      border: 5px solid mix($brand-primary, #fff, 30%);
      border-top-color: $brand-primary;
      border-radius: 50%;
      width: 46px;
      height: 46px;
      margin: 0 -20px 0 0;
      animation: spinning 1.5s linear infinite;
    }
  }

edited Jul 19 '17 at 17:00

asked Jul 19 '17 at 16:53

Vitaliy.Makogon

Use SVG....it's pretty much the best way. – Paulie_D Jul 19 '17 at 18:10
https://stackoverflow.com/questions/29350504/circular-percent-progress-bar?rq=1 – Paulie_D Jul 19 '17 at 18:14
Possible duplicate of [Circular percent progress bar](https://stackoverflow.com/questions/29350504/circular-percent-progress-bar) – Juliën Jul 19 '17 at 19:44

How to make the spinner ends rounded?

0 Answers0