Using a linear gradient to achieve progress scroll bar

Code:

body{
    // (first step) adding such a linear gradient from the lower left to the upper right corner to
    background-image:linear-gradient(to right top,#ffcc00 50%, #eee 50%);
    background-repeat:no-repeat;
    // (third step) calc were used, subtracting the 100vh, i.e. by subtracting the height of a screen, so that when the slide gradient just in the end portion of the bonded upper right corner;
    // + 5px scroll progress bar is height, set aside a height of 3px.
    background-size: 100% calc(100% - 100vh + 3px);
}

// (second step) using a pseudo-element, the extra portion of the cover
body::after{
    content:"";
    position: fixed;
    top: 3px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}