demo-app
/
normal.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
    body {margin: 0;}
    .progress span {
        display: block;
        height: 3px;
        background-color: #777;
    }
    .blue span {background-color: #34c2e3;}
    .cyan span {background-color: #06C1AE;}
    .orange span {
        background-color: #fecf23;
        background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
    }
    .stripes span {
        background-size: 20px 20px;
        background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .35) 25%,
            transparent 25%, transparent 50%, rgba(255, 255, 255, .35) 50%,
            rgba(255, 255, 255, .35) 75%, transparent 75%, transparent);
        -webkit-animation: animate-stripes 1s linear infinite;
    }
    /* 定义动画 */
    @-webkit-keyframes animate-stripes {
        0% {background-position: 0 0;}
        100% {background-position: 60px 0;}
    }
    .loading {
        text-align: center;
        color: #ccc;
        margin-top: 20px;
        font-style: italic;
    }
</style>
</head>
<body>
    <div class="progress orange stripes">
        <span></span>
    </div>
    <div class="loading">loading&hellip;</div>
</body>
</html>