@loading-result: 90%;

@keyframes loading-animate {
  0% {
    width: 0%;
  }
  100% {
    width: @loading-result;
  }
}
.pictool-component-loading {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  background: #000000aa;
  display: none;

  &.loading-show {
    display: block;

    .pictool-loading-inner {
      height: 100%;
      width: @loading-result;
      background: -webkit-linear-gradient(left,#4bf0f882,#3d7bd9);
      background: -moz-linear-gradient(left,#4bf0f882,hsl(216, 67%, 55%));
      background: -o-linear-gradient(left,#4bf0f882,#3d7bd9);
      background: -ms-linear-gradient(left,#4bf0f882,#3d7bd9);
      background: linear-gradient(left,#4bf0f882,#3d7bd9);
      border-radius:10px;
      box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
      animation: loading-animate 2s linear;
    }

    .pictool-loading-outer {
      position: absolute;
      top: 50%;
      left: 10%;
      right: 10%;
      height: 10px;
      border-radius:10px;
      background: -webkit-linear-gradient(left,#e4e3e4,#e4e5e4);
      background: -moz-linear-gradient(left,#e4e3e4,#e4e5e4);
      background: -o-linear-gradient(left,#e4e3e4,#e4e5e4);
      background: -ms-linear-gradient(left,#e4e3e4,#e4e5e4);
      background: linear-gradient(left,#e4e3e4,#e4e5e4);
    }
    
  }

  
}


