NProgress.js进度条

目录

        • 一、代码
        • 二、效果演示

一、代码


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NProgress.js进度条title>
    <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js">script>
    <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
    <style>
        .cons {
      
            width: 100%;
            height: 50px;
            position: fixed;
            top: 100px;
        }
        
        .bar {
      
            position: absolute;
            top: 50%;
        }
        
        .spinner {
      
            position: absolute;
            left: 50%;
        }
    style>
head>

<body>
    <div class="cons">div>
    <script>
        NProgress.configure({
      
            minimum: 1, //开始时的最小百分比,0.08
            // template: '
', //进度条自定义HTML
ease: 'ease', //缓冲动画 speed: 3500, //动画速度 trickle: false, //自动递增 trickleSpeed: 800, //每次步进间隔 showSpinner: true, //是否禁用进度环 trickleRate: 0.02, //每次步进增长 parent: ".cons" //父元素,默认body }); NProgress.start(); NProgress.set(0.2); //设置进度条百分比,0-1 NProgress.inc(0.3); //进度条增加随机量,最大0.994 setTimeout(() => { NProgress.done(); //进度条满格 NProgress.remove(); //移除进度条 }, 3000);
script> <script> console.log("%c ", 'margin-left:0px;padding:100px 100px;background-image: url("https://liujianwei695.gitee.io/minifile/images/officialAccount.jpg");background-size: 200px 200px;background-position: center;background-repeat: no-repeat;'); script> body> html>

二、效果演示

进度条效果图

具体显示效果可根据注释说明进行配置。


标签:JavaScript,HTML,NProgress,进度条,插件


更多演示案例,查看 案例演示


欢迎评论留言!

你可能感兴趣的:(JavaScript,插件类,javascript,html,progress,插件,进度条)