<script>
export default {
  name: 'UiSkeleton',
  functional: true,
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    radius: {
      type: String,
      default: '3px'
    }
  },
  render(h, context) {
    const style = {}
    const { props, data } = context
    if (props.width) {
      style.width = props.width
    }
    if (props.height) {
      style.height = props.height
    }
    if (props.radius) {
      style['border-radius'] = props.radius
    }
    const className = data.staticClass || data.class
    return h('div', {
      class: ['ui-skeleton'].concat(className || []),
      style
    })
  }
}
</script>
<style lang="less">
.ui-skeleton{
  position: relative;
  overflow: hidden;
  background-color: #f3f3f3;
  &:before{
    content: '';
  }
  &:after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: linear-gradient(90deg,transparent,hsla(0,0%,100%,.4),transparent);
    -webkit-animation: ui-skeleton-animate 1.75s linear infinite;
    animation: ui-skeleton-animate 1.75s linear infinite
  }
}
@keyframes ui-skeleton-animate {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }

  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
  }
}

</style>
