idea

If a website wants to improve user experience, it can start from improving the use of fluency, improve usability, improve interactive experience and so on. It is believed that the smoothness of the website application is critical to improving user experience and can provide timely feedback to users’ psychological expectations to a large extent.

So let’s start from the beginning and optimize the first screen loading experience. According to statistics, if the first screen time is less than 2 seconds, it can be regarded as excellent, less than 5 seconds is barely acceptable, and more than 5 seconds, most users will choose to leave. There are a lot of ways to optimize the first screen time, can increase the server resources, can be compressed as much as possible the front-end application, or the deployment to the CDN reduce the response time of the site, but in any case, originating from the user request to the first screen loaded this period of time, the application is unable to use, and many methods need to have a certain cost. Is there a universal way to minimize white screen time at no cost? Yes, there are loading progress bars, CSS loading animations and skeleton screens. The loading progress bar is key, which can effectively reduce the anxiety of users waiting for a blank screen and improve the overall cohesion of the application. Can effectively hint users, give a psychological expectation, improve subjective experience, so that users are more willing to wait for a longer time.

The desired effect

Can display the current loading progress according to the site loading condition. The time the user sees is no more than the server response time plus the loading time of the index. HTML file, which is usually about a second, and the index. HTML file is usually only a few kilobytes (don’t mention putting everything in it…). .

Well, Demo is the top loading progress bar for SluckyUI’s first screen loading.

The overall structure

Place the

In order to see the loading effect as quickly as possible and shorten the white screen time, the relevant function code should be directly added to the index. HTML, so that users can see the loading progress bar effect after loading the index. HTML, and the function code should be written with native JS as far as possible.

Progress began

We start loading the progress bar with a self-executing function isolation scope

// Something like this (function(){
    updateProgress()
})()
Copy the code

End of the schedule

Listen for the onload event of the browser. When all resources on the page are loaded, the browser will trigger the onload event. Therefore, the occurrence of the onload event can be used as the end of the loading process.

The loading process

Now, how do you record the loading process as realistically as possible? Well, we can count each resource individually and show it as a percentage on the progress bar. Nonono, there are few advantages to this method except that it really reflects the actual loading situation, it is not generality enough, it is troublesome to count every resource accurately etc…

Yes, because each resource has a different size and number, and users have different loading speeds, it can be a pain and a headache to calculate exactly how the page loads. This time should be the sword to go astray, display the front of the camouflage ha ha. With a clear beginning and end, we can simulate the loading process, which is a high imitation, which is hard for the average user to find and smile at.

There are a few things that are very important to do high imitation

  • Each time the progress bar advances by a random distance, we call it a random offset
  • When the progress bar advances to a certain point, it is necessary to properly stop and wait for the completion of real loading to prevent the progress from finishing before the completion of loading, and also to prevent the progress bar from finishing before the completion of real loading. And the timing of that, of course, is also random.
  • Although the key nodes are made random, the specific base values need to be different from site to site, and the base values need to be appropriately random.

Ordinary series

Based on the above conditions, we write a generic series version with fixed values for each parameter.

<! -- index.html --> ... <progress max="100" value="0" class="progress-loading-g" id="progress_loading"></progress>
...
<script>
    (function(){
        var progress = document.getElementById('progress_loading') var _timer; UpdateProgress (100) // Hide the progress bar window.onload = after loadingfunction() {
            progress.style.display = "none";
        }
        
        functionUpdateProgress (target){// Check the boundary conditionsif (target >= 100) {
                progress.value = 100;
                return;
            }
            _timer = setInterval(function() {// Progress is accumulated when the target value is not reachedif (progress.value < target) {
                    progress.value += 5;
                } else{// Stop progress.value = target; clearInterval(_timer); }}, 0); } })() </script> ...Copy the code

Ok, it is not difficult, the general idea has been clarified in the normal series version, but the fixed increase in the normal version is difficult to deceive the user’s eyes, so what should be done?

To prepare

Now we are going to do some preparation for the serious series. First of all, we’re going to randomly increase the offset each time.

var _interval = Math.ceil(Math.random() * 5);
Copy the code

The target value should also be random each time it is reached, usually between 70% and 90%, and then stopped to wait for the actual load to complete.

Var isPositive = math.floor (math.random () * 2); var isPositive = math.floor (math.random () * 2); var tarOffset = Math.ceil(Math.random() * 10); isPositive ? target += tarOffset : target -= tarOffset;Copy the code

After the onLoad event is triggered, wait for a certain period of time for the progress bar to disappear. This prevents the progress bar from disappearing prematurely when the user loads too fast.

setTimeout(function() {
    progress.style.display = "none";
}, 3000);
Copy the code

Serious series

<! -- index.html --> ... <progress max="100" value="0" class="progress-loading-g" id="progress_loading"></progress>
...
<script>
    (function() {
            var $ = function(id) {
                return document.getElementById(id)
            }
            var progress = $('progress_loading');
            var _timer;
            var _disTimer;

            updateProgress(80, 300);

            functionupdateProgress(tar, delay, callback) { clearInterval(_timer); // Set the thresholdif (tar >= 100) {
                    progress.value = 100;
                    clearInterval(_timer);
                    callback && callback();
                    return; Var isPositive = math.floor (math.random () * 2); var tarOffset = Math.ceil(Math.random() * 10); isPositive ? tar += tarOffset : tar -= tarOffset; _timer =setInterval(function() {
                    if(progress.value < tar) {var _interval = math.ceil (math.random () * 5); progress.value += _interval; }else{// Stop progress.value = tar; clearInterval(_timer); callback && callback(); } }, delay); } // onload time occurs when the load is complete window.onload =function() {
                updateProgress(100, 0, function() { clearTimeout(_disTimer); // Prevent the progress bar from disappearing prematurely when the user loads too fast _disTimer =setTimeout(function() {
                        progress.style.display = "none";
                    }, 2000);
                });
            }
        })();
</script>
...
Copy the code

Nice styling is essential.

Progress bar Style

// index.html
...
<style>
    .progress-loading-g {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    }

    .progress-loading-g::-moz-progress-bar {
        background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    }

    .progress-loading-g::-webkit-progress-bar {
        background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    }

    .progress-loading-g::-webkit-progress-value {
        background: #fff;
        transition: all 1s;
    }
</style>
...
Copy the code

Bingo! That’s it, a highly simulated loading progress bar. Adding functionality to your site can improve overall fluency and user experience. Keep in mind that it varies from site to site, and you can fine-tune the offset and interval for each advance.

Attached: loading progress bar source code

More fun progress bars

Demo and use documents under the Loading state Loading tag

Attached: other progress bar source code.

At the end

The key point of this loading progress bar is to consider the real loading process from the user’s point of view, so that the simulation is the best. More interesting components in SluckyUI, welcome to more exchanges, looking forward to your participation. The components involved have been updated in NPM, NPM I slucky can be used by installing the latest version.

Series of portals from scratch

  • Re from scratch UI library authoring life specification
  • Re from scratch UI library writing buttons for Life
  • Re writing forms for Life from scratch UI Library
  • Re writing life’s Table Components from scratch UI library
  • Re From Scratch backend learning configuration Ubuntu+Ngnix+Nodejs+Mysql environment