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);

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---