长形进度条合集-html代码-BFW代码库

长形进度条合集

代码语言：html

所属分类：进度条

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> - Flat progress bars</title>
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <style>
        html {
            padding: 0;
            margin: 0;
        }
        body {
            font-family: 'Source Sans Pro', sans-serif;
            padding: 2em;
            margin: 0;
        }
        .border-radius-radius {
            border-radius: 3px;
        }
        .border-radius-round {
            border-radius: 100px;
        }
        .progress-bar {
            margin-bottom: 1em;
            height: 1.7em;
            background-color: #ecf0f1;
        }
        .progress-bar .bar {
            display: block;
            height: 100%;
        }
        .progress-bar.radius {
            border-radius: 3px;
        }
        .progress-bar.radius .bar {
            border-radius: 3px;
        }
        .progress-bar.round {
            border-radius: 100px;
        }
        .progress-bar.round .bar {
            border-radius: 100px;
        }
        .progress-bar-label {
            margin: 0.2em 1em;
            color: #fff;
        }
        .float-right {
            float: right;
        }
        .float-left {
            float: left;
        }
        .success,
        .bggreen {
            background-color: #39c892;
        }
        .bgyellow {
            background-color: #fac75b;
        }
        .error,
        .bgred {
            background-color: #e74c3c;
        }
        .bgblue {
            background-color: #3bafda;
        }
        .bgsilver {
            background-color: #ccc;
        }
        .bggray {
            background-color: #333;
        }
        .colorwhite {
            color: #fff;
        }
        .colorgray {
            color: #333;
        }

    </style>

</head>
<body translate="no">
    <h4><strong>PROGRESS BARS</strong></h4>
    <p>
        <b>Classic</b>
    </p>
    <div class="progress-bar">
        <span class="bar bggreen" style="width: 80%"></span>
    </div>
    <div class="progress-bar">
        <span class="bar bgyellow" style="width: 80%"></span>
    </div>
    <div class="progress-bar">
        <span class="bar bgred" style="width: 80%"></span>
    </div>
    <div class="progress-bar">
        <span class="bar bgblue" style="width: 80%"></span>
    </div>
    <div class="progress-bar">
        <span class="bar bgsilver" style="width: 80%"></span>
    </div>
    <div class="progress-bar">
        <span class="bar bggray" style="width: 80%"></span&g.........完整代码请登录后点击上方下载按钮下载查看