How to create loading mask base on element construct like facebook ?
When we develop a website, sometimes we will need to wait until the server responds to the data before displaying it to the end user. If the response speed of the server is not fast for more than 2 seconds, the end user is quite annoyed to have to wait a while to see the data.
To avoid the tedious waiting for data from the server we can design the buttons to wait for the end user to know that they are waiting for the data instead of not knowing whether the server is loaded or not.
In the example below we will design a data waiting frame similar to how facebook did for their application. Let's see the example below.
Responds to the data before displaying it
<!DOCTYPE html>
<html>
<head>
<title>How to create loading mask base on element construct like facebook ? - HtmlcssDownload.com</title>
<style>
body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #eee;font-family: Arial, Helvetica, sans-serif;}
.box{width: 500px;padding:20px;background: #fff;border-radius: 20px;}
.box .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
.box .mask-group-slider{display:flex;flex-wrap:wrap;}
.box .mask-group-slider .item{width:25%;height:135px;margin-bottom:20px;}
.box .mask-group-slider .item .img{width:40px;height:40px;border-radius:50%;margin: 20px auto;}
.box .mask-group-slider .item .line-title{margin-top:10px;}
.box .mask-group-slider .item .line-title .line-1{height:6px;background:var(--input-border-color);margin:0px 20px;border-radius:10px;}
.box .mask-group-slider .item .line-title .line-1{height:6px;background:var(--input-border-color);margin:0px 20px;border-radius:10px;margin-top:5px;}
.bg-mask-loading {
position: relative;
overflow:hidden;
}
.bg-mask-loading:after{content:'';position:absolute;left:0px;top:0px;bottom:0px;right:0px;-webkit-animation: mask-data-loading 3s linear infinite;animation: mask-data-loading 3s linear infinite;z-index:1;background: linear-gradient(90deg, var(--input-border-color), #fafafa 50%, var(--input-border-color));background-size:300%;}
@keyframes mask-data-loading{
from{
background-position:0px 0px;
}
to {
background-position: -600% 0px
}
}
</style>
</head>
<body>
<div class="box">
<div class="title">How to create loading mask base on element construct like facebook</div>
<div class="mask-group-slider">
<div class="item">
<div class="img bg-mask-loading"></div>
<div class="line-title">
<div class="line-1 bg-mask-loading"></div>
<div class="line-2 bg-mask-loading"></div>
</div>
</div>
<div class="item">
<div class="img bg-mask-loading"></div>
<div class="line-title">
<div class="line-1 bg-mask-loading"></div>
<div class="line-2 bg-mask-loading"></div>
</div>
</div>
<div class="item">
<div class="img bg-mask-loading"></div>
<div class="line-title">
<div class="line-1 bg-mask-loading"></div>
<div class="line-2 bg-mask-loading"></div>
</div>
</div>
<div class="item">
<div class="img bg-mask-loading"></div>
<div class="line-title">
<div class="line-1 bg-mask-loading"></div>
<div class="line-2 bg-mask-loading"></div>
</div>
</div>
<div class="item">
<div class="img bg-mask-loading"></div>
<div class="line-title">
<div class="line-1 bg-mask-loading"></div>
<div class="line-2 bg-mask-loading"></div>
</div>
</div>
<div class="item">
<div class="img bg-mask-loading"></div>
<div class="line-title">
<div class="line-1 bg-mask-loading"></div>
<div class="line-2 bg-mask-loading"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Result for example
Input number only show number keyboard on mobile browser.
My website builds on the background knowledge accumulated from me personally with the desire to share and expand the developer community.
Copyright 2020 by Htmlcssdownload.com. All Rights Reserved. Powered by HV Team.
