HTML5 带数字的进度条

参考链接： https://github.com/daimajia/NumberProgressBar

progress

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1381
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    function randomPercentage() {
        return Math.floor(Math.random() * 100);
    }

function randomInterval() {
        var min = Math.floor(Math.random() * 100);
        var max = min + (Math.floor(Math.random() * 40) + 20);
        return [min, max];
    }

function randomStyle() {
        return ['', 'dream', 'sun'][Math.floor(Math.random() * 3)];
    }

var interval = randomInterval();
    var randomTitle = $('#random .title');
    var randomBar = $('#random .number-pb').NumberProgressBar({
        min: interval[0],
        max: interval[1]
    })
    randomBar.find('.number-pb-shown').toggleClass(randomStyle());
    randomTitle.text('Random [Min: ' + interval[0] + ', Max: ' + interval[1] + ']');

var reachLoop = function() {
        window.setTimeout(function() {
            randomBar.reach(undefined, {
                complete: reachLoop
            }).find('.number-pb-shown').toggleClass(randomStyle());
        }, 2000);
    }

reachLoop();

var num = randomPercentage();
    var controlTitle = $('#sample-pb .title').text('@' + num);
    var controlBar = $('#sample-pb .number-pb').NumberProgressBar({
        duration: 12000,
        current: num
    });

var $controls = $('#sample-pb .control');

$controls.filter('.empty').click(function() {
        animate(0);
    })
    $controls.filter('.minus-10').click(function() {
        animate(num - 10);
    })
    $controls.filter('.minus-30').click(function() {
        animate(num - 30);
    })
    $controls.filter('.plus-10 ').click(function() {
        animate(num + 10);
    })
    $controls.filter('.plus-30 ').click(function() {
        animate(num + 30);
    })
    $controls.filter('.full').click(function() {
        animate(100);
    })

编译

CSS

.top-banner a {
    color: #ff534e;
    /*
  darkblue  : #176785;
  bluegreen : #499989;
  lightgreen: #BED194;
  milk      : #FFD7AC;
  red       : #FF534E;
*/
}
body {
    color: #176785;
    font-family: 'Quicksand', sans-serif;
}
a {
    color: #ff534e;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}
a:hover {
    border-bottom-color: #ffd7ac;
}
.control {
    display: inline-block;
    width: 10%;
    cursor: pointer;
    padding: 10px;
    border: 2px solid #ffd7ac;
    border-radius: 5px;
    margin: 10px;
}
.container {
    width: 960px;
    margin: 30px auto;
    text-align: center;
}
article {
    position: relative;
    padding: 0 5em;
    border: 1px solid #bed194;
    margin-bottom: 3em;
    border-radius: 5px;
}
article:hover {
    border-color: #499989;
}
article:first-child {
    margin-top: 3em;
}
article .title {
    position: absolute;
    left: 10px;
    top: -32px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #fff;
}
@media (max-width: 960px) {
    .container {
        width: 90%;
    }
    article {
        padding: 0 2em;
    }
}

HTML

<section id="random">
        <article>
            <h4 class="title">Random</h4>
            <div class="number-pb">
                <div class="number-pb-shown"></div>
                <div class="number-pb-num">0</div>
            </div>
        </article>
    </section>

参考链接： https://github.com/daimajia/NumberProgressBar

progress

编辑器支持Emmet

快捷键

参考链接： https://github.com/daimajia/NumberProgressBar

progress

HTML5带旁注的3D多阶段进度条

HTML5 SVG使用球体水面波动显示进度动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：