×

分享几种页面加载前loading状态的形式

作者:Terry2018.01.30来源:Web前端之家浏览:17490评论:0
关键词:loading

500.jpg

在我印象中,今天应该是深圳近几年里最冷的一天了,几天时间从二十多度狂飙到几度。

图片.png

这气温也是醉了,大冷天手不都不想伸出来。

YUI7__5L~@ATEO~KIPMY66M.jpg

当然了,再冷的天气击退不了我发帖的激情,额~~~哆嗦~~~

为了更好的用户体验,在页面加载前,避免出现白页面,我们一般会使用loading形式,提示用户预览的页面正在加载。今天分享几款不错的loading效果,天冷懒得打字,直接上干货:

1、顶部滚动滚动加载:

图片.png



代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Type">
    <meta content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <title>分享几个页面加载前loading状态的形式</title>      
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <link rel="stylesheet" type="text/css" href="/demo/loading/css/animate.css">
</head>

<body>
    <div id="progressBar">
            <div class="progress-bar"></div>
    </div>
</body>

</html>

2、环形数字加载:

<!DOCTYPE html>
<html>
<head>
    <title>分享几个页面加载前loading状态的形式</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>

    <canvas id="circularProgressContainer"></canvas>

    <script type="text/javascript">
        var CircularProgress = function(selector,option){
            this.canvas = document.querySelector(selector);
            this.canvas.width = option.width;
            this.canvas.height = option.height;
            this.ctx = this.canvas.getContext("2d");
            this.option = option;
            this.render();
        }
        CircularProgress.prototype=   {
            sector: function (x, y, r, begin, end, color, clock) {
                var ctx = this.ctx;
                ctx.beginPath();
                ctx.fillStyle = color;
                ctx.moveTo(x, y);
                ctx.arc(x, y, r, begin, end, clock)
                ctx.lineTo(x, y);
                ctx.fill();
            },
            circle: function (x, y, r,  color) {
                this.sector(x, y, r, 0, 2 * Math.PI, color);
            },
            getColor: function (percent) {
                if (percent < 20) return "#6B0300";
                if (percent < 40) return "#814700";
                if (percent < 60) return "#847A00";
           
                if (percent < 80) return "#556C02";
                if (percent <= 100) return "#367D00";
            },
            text: function (x, y, text, color) {

                this.ctx.fillStyle = color;
                this.ctx.font = "bold 20px Verdana";
                this.ctx.fillText(text,x - this.ctx.measureText(text).width / 2, y+8 );
            },
            render: function () {
               
                var x = this.canvas.width / 2, y = this.canvas.height / 2, r = x - 20, innerR = r - this.option.ringWidth;
                this.circle(x, y, r, "#DCDCDC")
                this.sector(x, y, r, -Math.PI / 2, 2 * Math.PI * this.option.percent / 100 - Math.PI / 2, this.getColor(this.option.percent));
                this.circle(x, y, innerR, "white");
                this.text(x, y, this.option.percent + "%","black");
            }
        }

        var cp = new CircularProgress("#circularProgressContainer", { width: 150, height: 150, percent: 0, ringWidth: 15 });
        //为了演示
        setInterval(function () {
            if (cp.option.percent >= 100) cp.option.percent = 0;
            cp.option.percent++;
            cp.render();
        }, 100)
    </script>
</body>
</html>

3、乐器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Type">
    <meta content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <title>分享几个页面加载前loading状态的形式</title>      
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <link rel="stylesheet" type="text/css" href="/demo/loading/css/newton.css">
</head>

<body>
    <div class="wapper">
            <div class="newtonBall-base"></div>
            <div id="newtonBall-left" class="newtonBall-left"></div>
            <div id="newtonBall-right" class="newtonBall-right"></div>
        </div>
</body>

</html>

4、收音机

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Type">
    <meta content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <title>分享几个页面加载前loading状态的形式</title>      
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <link rel="stylesheet" type="text/css" href="/demo/loading/css/cassette.css">
</head>

<body>
    <div class="wapper">
            <div class="cassette-base"></div>
            <div id="cassette-left" class="cassette"></div>
            <div id="cassette-right" class="cassette"></div>
        </div>
</body>

</html>

5、风扇

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Type">
    <meta content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <title>分享几个页面加载前loading状态的形式</title>      
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <link rel="stylesheet" type="text/css" href="/demo/loading/css/orange.css">
</head>

<body>
    <div class="wrapper">
            <div id="orange-base">
                <div id="orange-bar" class="orangeBar"></div>
            </div>
            <div id="orange-right" class="orangeRight"></div>
            <div id="leaf" class="leaf1"></div>
            <div id="leaf" class="leaf2"></div>
            <div id="leaf" class="leaf3"></div>
    </div>
</body>

</html>

OK,今天分享的干货差不多就这些。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/webloadingfont.html

网友评论文明上网理性发言 已有0人参与

发表评论: