css skeleton loading & skeleton components

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

css skeleton loading

css & :empty

See the Pen Skeleton Screen with CSS by xgqfrms
(@xgqfrms) on CodePen.

dom

https://www.italki.com/contacts/teacher/favorited

 <div class="teacher-card">

    <div class="teacher-card-left">

      <div class="teacher-card-detail-top">

        <div class="teacher-card-avatar">

          <div class="teacher-card-avatar-placeholder"></div>

        </div>

        <div class="teacher-card-information">

          <div class="teacher-card-name-placerholder"></div>

          <div class="teacher-card-type-placerholder"></div>

          <div class="teacher-card-divider"></div>

          <div class="teacher-card-small-head-placeholder"></div>

          <div class="teacher-card-small-languages-placeholder"></div>

        </div>

      </div>

      <div class="teacher-card-detail-bottom">

        <div class="teacher-card-rating">

          <div class="teacher-card-stars">

            <div class="teacher-card-rating-placeholder"></div>

          </div>

        </div>

        <div class="teacher-card-information">

          <div class="teacher-card-small-head-placeholder"></div>

          <div class="teacher-card-small-speaks-placeholder"></div>

          <div class="teacher-card-rate">

            <div class="teacher-card-hourly">

              <div class="teacher-card-small-head-placeholder"></div>

              <div class="teacher-card-small-hourly-placeholder"></div>

            </div>

            <div class="teacher-card-trial">

              <div class="teacher-card-small-head-placeholder"></div>

              <div class="teacher-card-small-hourly-placeholder"></div>

            </div>

          </div>

        </div>

      </div><i class="teacher-card-favorite"></i>

    </div>

    <div class="teacher-card-right">

      <div class="teacher-card-tab-placeholder"></div>

    </div>

  </div>



@charset "UTf-8";

/* app.css */

:root {

  --color: #000;

  --default-color: green;

  --new-color: #0f0;

}

html{

  font-size: 62.5%;

  /* 10px = 1rem */

}

* {

  box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

}

html, body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, object, code, legend, button, input, textarea, th, td, a, img, video {

  margin: 0;

  padding: 0;

  border: 0;

  outline: 0;

}

*, :after, :before {

  box-sizing: border-box;

}

.teacher-card {

  position: relative;

  display: flex;

  margin-bottom: 20px;

}

@-webkit-keyframes pulse {

  0% {

      -webkit-transform: scaleX(1);

      transform: scaleX(1)

  }

  50% {

      -webkit-transform: scale3d(1.0075,1.0075,1.0075);

      transform: scale3d(1.0075,1.0075,1.0075)

  }

  to {

      -webkit-transform: scaleX(1);

      transform: scaleX(1)

  }

}

@keyframes pulse {

  0% {

      -webkit-transform: scaleX(1);

      transform: scaleX(1)

  }

  50% {

      -webkit-transform: scale3d(1.0075,1.0075,1.0075);

      transform: scale3d(1.0075,1.0075,1.0075)

  }

  to {

      -webkit-transform: scaleX(1);

      transform: scaleX(1)

  }

}

.teacher-card-left {

  position: relative;

  padding: 25px 25px 20px;

  width: 564px;

  min-height: 284px;

  border-radius: 6px;

  background: #fff;

  box-shadow: 0 7px 25px 0 rgba(0,0,0,.1);

  cursor: pointer

}

.teacher-card-right {

  padding: 25px 20px 20px;

  width: 386px;

  border-radius: 0 6px 6px 0;

  background: #fff;

  box-shadow: 5px 7px 25px 0 rgba(0,0,0,.1);

}

.teacher-card-detail-bottom,

.teacher-card-detail-top {

  display: flex;

}

.teacher-card-avatar {

  display: flex;

  align-items: flex-start;

  text-align: center;

}

.teacher-card-avatar-placeholder,

.teacher-card-tab-placeholder {

  background-image: -webkit-gradient(linear,right top,left top,from(#ccc),color-stop(0,#eee),color-stop(0,#ccc),to(#eee));

  background-image: -webkit-linear-gradient(right,#ccc,#eee,#ccc 0,#eee);

  background-image: linear-gradient(270deg,#ccc,#eee 0,#ccc 0,#eee);

}

.teacher-card-avatar-placeholder {

  margin: 0 auto;

  width: 100px;

  height: 100px;

  border-radius: 50%;

  box-shadow: 0 5px 15px 0 rgba(0,0,0,.2);

}

.teacher-card-information {

  margin-left: 30px;

  flex: 1 1;

}

.teacher-card-name-placerholder {

  margin-bottom: 10px;

  width: 170px;

  height: 20px;

  border-radius: 10px;

  background-image: -webkit-gradient(linear,right top,left top,from(#ccc),color-stop(0,#eee),color-stop(0,#ccc),to(#eee));

  background-image: -webkit-linear-gradient(right,#ccc,#eee,#ccc 0,#eee);

  background-image: linear-gradient(270deg,#ccc,#eee 0,#ccc 0,#eee);

}

.teacher-card-small-head-placeholder,

.teacher-card-type-placerholder {

  height: 15px;

  border-radius: 7.5px;

  background-image: -webkit-gradient(linear,right top,left top,from(#ccc),color-stop(0,#eee),color-stop(0,#ccc),to(#eee));

  background-image: -webkit-linear-gradient(right,#ccc,#eee,#ccc 0,#eee);

  background-image: linear-gradient(270deg,#ccc,#eee 0,#ccc 0,#eee);

}

.teacher-card-divider {

  margin: 12px 0;

  width: 15px;

  height: 2px;

  border-radius: 1px;

  background: #ff4338;

}

.teacher-card-small-head-placeholder {

  margin-bottom: 10px;

  width: 80px;

}

.teacher-card-small-languages-placeholder,

.teacher-card-small-speaks-placeholder {

  height: 20px;

  border-radius: 10px;

  background-image: -webkit-gradient(linear,right top,left top,from(#ccc),color-stop(0,#eee),color-stop(0,#ccc),to(#eee));

  background-image: -webkit-linear-gradient(right,#ccc,#eee,#ccc 0,#eee);

  background-image: linear-gradient(270deg,#ccc,#eee 0,#ccc 0,#eee);

}

.newteacher-card-favorite,

.teacher-card-favorite {

  position: absolute;

  top: 25px;

  right: 25px;

  cursor: pointer;

}

.teacher-card-favorite {

  width: 30px;

  height: 30px;

  background: url(heart-empty.96354e1f.svg) no-repeat 50%/30px 30px;

  background: url(https://www.italki.com/static/media/heart-empty.96354e1f.svg) no-repeat 50%/30px 30px;

  /* background: url(/static/media/heart-empty.96354e1f.svg) no-repeat 50%/30px 30px; */

}

.teacher-card-right {

  padding: 25px 20px 20px;

  width: 386px;

  border-radius: 0 6px 6px 0;

  background: #fff;

  box-shadow: 5px 7px 25px 0 rgba(0,0,0,.1);

}

.teacher-card-tab-placeholder {

  margin: 50px auto 0;

  width: 343px;

  height: 195px;

  border-radius: 6px;

}

skeleton components

https://ant.design/components/skeleton-cn/

import { Skeleton, Button } from 'antd';

class Demo extends React.Component {

  state = {

    loading: false,

  };

  showSkeleton = () => {

    this.setState({ loading: true });

    setTimeout(() => {

      this.setState({ loading: false });

    }, 3000);

  };

  render() {

    return (

      <div className="article">

        <Skeleton loading={this.state.loading}>

          <div>

            <h4>Ant Design, a design language</h4>

            <p>

              We supply a series of design principles, practical patterns and high quality design

              resources (Sketch and Axure), to help people create their product prototypes

              beautifully and efficiently.

            </p>

          </div>

        </Skeleton>

        <Button onClick={this.showSkeleton} disabled={this.state.loading}>

          Show Skeleton

        </Button>

      </div>

    );

  }

}

ReactDOM.render(<Demo />, mountNode);