6
I see in several web applications that before displaying the content is displayed some blocks looking like an image, the blocks I speak in the image are those of the sidebar. Why use it and how to use it?
Image of an application:
3 answers
4
This is called Preload overlay and, as they said in the other responses, it is a user-friendly practice, showing a layout and a warning that the page is loading, for example.
This can be done with Jquery/Css/Javascript, using code similar to the below.
Jquery
jQuery(function ($) {
var target = $('#target');
$('.toggle-loading').click(function () {
if (target.hasClass('loading')) {
target.loadingOverlay('remove');
} else {
target.loadingOverlay();
};
});
});
HTML
<div id="target" class="loading">
<div class="loading-overlay">
<p class="loading-spinner">
<span class="loading-icon"></span>
<span class="loading-text">loading</span>
</p>
</div>
</div>
CSS
@font-face {
font-family: "demo";
src: url('fonts/icons.woff') format("woff"), url('fonts/icons.ttf') format("truetype");
}
@keyframes loadingStart {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
position: relative;
pointer-events: none;
}
#css-input:checked ~ .loading .loading-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-animation: loadingStart 3s 300ms linear 1 both;
-moz-animation: loadingStart 3s 300ms linear 1 both;
-o-animation: loadingStart 3s 300ms linear 1 both;
animation: loadingStart 3s 300ms linear 1 both;
background: rgba(255, 255, 255, 0.5);
text-align: center;
}
#css-input:checked ~ .loading .loading-text {
font-size: 0.875rem;
line-height: 1.3125rem;
text-shadow: white 0 0 1em, white 0 0 0.5em, white 0 0 0.25em;
position: relative;
display: block;
text-transform: uppercase;
font-weight: bold;
}
#css-input:checked ~ .loading .loading-text:after {
content: "...";
}
#css-input:checked ~ .loading .loading-spinner {
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
margin: -3.9375rem auto 0;
color: #1a1d1d;
text-align: center;
}
#css-input:checked ~ .loading .loading-icon {
font-size: 4.8125rem;
line-height: 5.25rem;
text-shadow: rgba(255, 255, 255, 0.75) 0 0 0.5em;
-webkit-animation: loading 1s steps(4) infinite;
-moz-animation: loading 1s steps(4) infinite;
-o-animation: loading 1s steps(4) infinite;
animation: loading 1s steps(4) infinite;
display: block;
vertical-align: middle;
}
#css-input:checked ~ .loading .loading-icon:before {
vertical-align: middle;
content: "\e000";
font-family: "demo";
}
This example of code I removed from here.
If you want to use a plugin to do this, have this from here
1
When a web application has to load a lot of information, it is best to present the user with a screen like this and load the data "underneath" instead of a simple blank page with no information. It is a user-friendly issue.
To do something like this there are many ways, being a simpler combination of Javascript / jQuery / AJAX with CSS.
1
When it’s an application that has a lot of data to load, instead of adopting a blank page with loading, it already presents the layout model without the information and a warning that the information is being loaded. This is what happens there in the case of Slack, who you exemplified with the photo.
Front-end technologies such as HTML/CSS and Javascript must be used in this case.
Browser other questions tagged html5 css3
You are not signed in. Login or sign up in order to post.
They usually use this because they have taken a ready-made framework that does so. In rare cases, there is a real reason for it, made by a conscious developer. However, it may be that in the case of the latter case, there is some good answer, despite the broad question.
– Bacco
They use for the sake of user experience (UX Design) to give the best user experience, because when opening, it would be good to give some feedback or warning that is loading or assembling the structure with layout almost ready. If it were no layout or something like that, it can lead the user to think that he is too slow or catching what is not actually true and what harms the application or company.
– Adriano Resende