nanobar实现一个多场景进度条效果代码-html代码-BFW代码库

nanobar实现一个多场景进度条效果代码

代码语言：html

所属分类：进度条

代码描述：nanobar实现一个多场景进度条效果代码，包含顶部进度条、炫彩进度条等。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>
        body{background:#5B5D8E;color:#D5D6E2;font-family:"Microsoft YaHei","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif}
    .btn{display:inline-block;height:38px;line-height:38px;padding:0 18px;background-color:#009688;color:#fff;white-space:nowrap;text-align:center;font-size:14px;border:none;border-radius:2px;cursor:pointer;opacity:.9;filter:alpha(opacity=90)}
    *{margin:0;padding:0}
    .container{margin:0 auto;max-width:72em}
    #color,#centered{padding:1em;background:#fff;float:left;width:50%;box-sizing:border-box}
    #color .nanobar,#centered .nanobar{margin-bottom:2em}
    #color .nanobar .bar{background:#38f;border-radius:4px;box-shadow:0 0 10px #59d;height:6px;margin:0 auto}
    #centered .nanobar .bar{background:url('//repo.bfw.wiki/bfwrepo/images/rainbow.gif') 100%;height:9px}
    </style>
</head>

<body>
    <div class="container">
        <br>
        <h1 id="nanobar">nanobar.js</h1>
        <p>页面顶部进度条</p>
        <br>
        <div class="general-buttons">
            <button class="btn" onClick="simplebar.go(30)">nanobar.go(30)</button>
            <button class="btn" onClick="simplebar.go(60)">nanobar.go(60)</button>
       .........完整代码请登录后点击上方下载按钮下载查看