css3 progress bar design

Cool progress bar design using css3



DEMO


<!DOCTYPE html>
<html>
<head>
    <title>Progress bar design using css3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            background-color: #333;
            color: #333C48;
            overflow: hidden;
        }
        body, #inst, #next
        {
            font: 400 18px/1.4 'Segoe UI' ,Tahoma,Arial,Helvetica,sans-serif;
        }
        #box
        {
            position: absolute;
            box-sizing: border-box;
            left: 50%;
            top: 35%;
            width: 454px;
            margin: -98px 0 0 -227px;
            padding: 32px 24px;
            background-color: #f9fafc;
            box-shadow: 0 1px 3px #000;
        }
        #hdr
        {
            font-weight: 400;
            font-size: 32px;
            margin-bottom: 24px;
        }
        #prg
        {
            position: relative;
            height: 24px;
            margin-bottom: 20px;
            background-image: -webkit-linear-gradient(#d9dee7,#e2e7ef);
            border: 1px solid;
            border-color: #959aa6 #b4b9c3 #d0d5de;
            border-radius: 2px;
            box-shadow: inset 0 1px 3px #b4b9c3;
        }
        #line
        {
            width: 0;
            height: 24px;
            -webkit-transition: width 1s;
        }
        #perc
        {
            position: absolute;
            top: -1px;
            width: 100%;
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            text-align: center;
        }
        #inst, #next
        {
            display: none;
            float: right;
            font-size: 1.2em;
            padding: 3px 32px;
            margin-left: 12px;
            text-align: center;
            text-decoration: none;
            color: #fff;
            border: 0;
            cursor: pointer;
        }
        #line, #inst, #next
        {
            background-image: -webkit-linear-gradient(#53cbfe,#18a8e1);
            border-radius: 2px;
            box-shadow: inset 0 1px 0 #97dffd,0 -1px 0 #419dc3,0 0 0 1px #248cb5,0 1px 5px #999;
        }
    </style>
</head>
<body>
    <div id="box">
        <h1 id="hdr">
            Upload Progress</h1>
        <div id="prg">
            <div id="line" style="width: 81%;">
            </div>
            <div id="perc">
                81%</div>
        </div>
        <p id="info">
            Please Wait</p>
        <br />
        <a id="next" href="http://lesson8.blogspot.com/">Open Guide</a>
        <button id="inst" style="display: block;">
            Save</button></div>
</body>
</html>

css3 progress bar design css3 progress bar design Reviewed by Bhaumik Patel on 8:25 PM Rating: 5