css skeleton loading & skeleton components

css skeleton loading

css skeleton loadingcss & :empty

See the Pen <a href="https://codepen.io/xgqfrms/pen/zQEJWw">Skeleton Screen with CSS</a> by xgqfrms (<a href="https://codepen.io/xgqfrms">@xgqfrms</a>) on <a href="https://codepen.io">CodePen</a>.

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

---

xgqfrms