react-lite-misc/src/style/image-loading.less

Misc Components of jianliao.com

@keyframes refresh {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.image-loading {
  position: relative;

  display: inline-block;

  .image-error {
    height: 120px;
    width: 120px;
    background: url('../images/image-error@2x.png');
    background-size: cover;
  }

  img {
    display: block;
  }

  .image-reload {
    position: absolute;

    right: -30px;
    bottom: 0;

    height: 22px;
    width: 22px;

    line-height: 22px;

    margin-left: 10px;

    background: #FF7043;
    border-radius: 50%;
    color: #fff;

    font-size: 18px;
    text-align: center;

    cursor: pointer;

    &:hover {
      background: lighten(#FF7043, 10%)
    }
  }

  .image-loader-box {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.25);
    color: #fff;

    .image-loader {
      height: 24px;
      width: 24px;
      line-height: 24px;

      font-size: 24px;
      text-align: center;

      animation: refresh 1s infinite;
    }

    i {
      display: block;
    }

  }

}