5款简单实用的水平进度条（柱状图）控件

5 Animated progress bars

h5, bar, chart

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

function _siblings(elem) {
    var siblings = [],
        node = elem;

while (node) {
        node = node.previousElementSibling;

if (node) {
            siblings.push(node);
        }
    }

return siblings;
}

//toggle animation on button click
document.addEventListener('click', function(item) {

if (item.target.matches('.play-animation')) {

var siblingsArray = [];

siblingsArray = _siblings(item.target);

siblingsArray.forEach(function(item) {

var self = item;

animationToggle(self, 500);

});

}

});

//***YOU NEED THIS IN YOUR CODE *** 
//function for adding <span> elements for value and skill name
function additionalElems(progressElement, value, skillName) {

//adding value
    var valueChild = document.createElement('span');
    valueChild.className = 'progress-bar__value';
    valueChild.innerHTML = value + '%';
    progressElement.appendChild(valueChild);

//adding bar area
    var barChild = document.createElement('div');
    barChild.className = 'progress-bar__bar';
    progressElement.appendChild(barChild);

//adding inner area with the width of value
    var barInnerChild = document.createElement('div');
    barInnerChild.className = 'progress-bar__bar-inner';
    barInnerChild.style.width = value + '%';
    barChild.appendChild(barInnerChild);

//adding skillName
    var skillChild = document.createElement('span');
    skillChild.className = 'progress-bar__skill';
    skillChild.innerHTML = skillName;
    progressElement.appendChild(skillChild);
}

//adding <span> elements for value and skill name
var progressBar = document.querySelectorAll('.progress-bar');

progressBar.forEach(function(item) {

var self = item,
        barValue = self.getAttribute('data-value'),
        skillValue = self.getAttribute('data-skill'),
        effectNum = self.getAttribute('data-effect');

additionalElems(self, barValue, skillValue);

//adding special BEM classes to every progress bar element (to set classes for effects)
    self.className += ' progress-bar--' + effectNum;

var valueElem = self.querySelector('.progress-bar__value');

valueElem.className += ' progress-bar__value--' + effectNum;

var barElem = self.querySelector('.progress-bar__bar');

barElem.className += ' progress-bar__bar--' + effectNum;

var barInnerElem = self.querySelector('.progress-bar__bar-inner');

barInnerElem.className += ' progress-bar__bar-inner--' + effectNum;

var skillElem = self.querySelector('.progress-bar__skill');

skillElem.className += ' progress-bar__skill--' + effectNum;

//adding alignment for values
    if (self.classList.contains('progress-bar--aligned-values')) {
        valueElem.style.left = barValue + '%';
        valueElem.classList.add('progress-bar__value--aligned-value');
    }

//adding additional class for no overflow hidden
    if (self.classList.contains('progress-bar--no-overflow')) {
        barElem.classList.add('progress-bar__bar--no-overflow');
    }

})

//function for animation toggling
function animationToggle(progressElement, delay) {

var skillElem = progressElement.querySelector('.progress-bar__skill'),
        valueElem = progressElement.querySelector('.progress-bar__value'),
        skillBar = progressElement.querySelector('.progress-bar__bar-inner');

//removing animated classes, returning to start position
    skillElem.classList.remove('js-animated');
    valueElem.classList.remove('js-animated');
    skillBar.classList.remove('js-animated');

//adding animated classes to start animation
    setTimeout(function() {
        skillElem.classList.add('js-animated');
        valueElem.classList.add('js-animated');
        skillBar.classList.add('js-animated');
    }, delay);
}

//add animation onload
function onloadAnimation() {

progressBar.forEach(function(item) {
        animationToggle(item, 500)
    });

}

document.addEventListener("DOMContentLoaded", onloadAnimation());

编译

CSS

body {
    font-family: 'Niramit', sans-serif;
    font-size: 16px;
    color: #1c1c1c;
}
.container {
    width: 550px;
    margin: 50px auto 0px auto;
    text-align: center;
}
h1 {
    margin: 0;
    font-weight: 400;
    font-size: 35px;
}
h1 span {
    font-family: 'Kaushan Script', cursive;
    color: #A42CD6;
}
.submenu {
    display: flex;
    justify-content: center;
    margin: 10px auto 0;
}
.submenu__item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.submenu__item:not(:last-child) {
    margin-right: 30px;
}
.submenu__item a {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    display: inline-flex;
    align-items: center;
    font-size: 17px;
    color: inherit;
    text-decoration: none;
}
.submenu__item a:hover {
    color: #A42CD6;
}
.submenu__item a i {
    color: #A42CD6;
    margin-right: 5px;
}
.content-block {
    margin-top: 50px;
}
.content-block h2 {
    margin-bottom: 30px;
    font-weight: 400;
}
.content-block__effect {
    margin-bottom: 50px;
}
.progress-container {
    margin-bottom: 30px;
}
.play-animation {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    padding: 5px 15px;
    margin: auto;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border: 2px solid #1c1c1c;
    border-radius: 4px;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    cursor: pointer;
}
.play-animation:hover {
    color: #fff;
    background-color: #1c1c1c;
}
/* progress bar styles !!!YOU NEED THEM */

.progress-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.progress-bar {
    position: relative;
    width: 550px;
    box-sizing: border-box;
}
.progress-bar:not(:last-child) {
    margin-bottom: 35px;
}
.progress-bar--lg-offset:not(:last-child) {
    margin-bottom: 52.5px;
}
.progress-bar__bar,
.progress-bar__bar-inner,
.progress-bar__value,
.progress-bar__skill {
    box-sizing: border-box;
}
.progress-bar__bar {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.progress-bar__bar--no-overflow {
    overflow: visible;
}
.progress-bar__bar-inner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
}
.progress-bar__bar-inner.js-animated {
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.1, 1.14, 0.31, 1.06);
    transition-delay: 0s;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
.progress-bar__skill,
.progress-bar__value {
    font-size: 14px;
    letter-spacing: 1px;
}
.progress-bar__value--aligned-value {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* progress bar #1 styles */

.progress-bar--1 {
    height: 20px;
    padding: 4px;
    border: 1px solid #dddddd;
    border-radius: 20px;
}
.progress-bar__bar-inner--1 {
    background-image: linear-gradient(to right, #00BFB3 0, #037971 100%);
    background-size: 200%;
    background-position: 0 0;
    border-radius: 20px;
}
.progress-bar__skill--1 {
    position: absolute;
    top: -27px;
    left: -20px;
    opacity: 0;
}
.progress-bar__skill--1.js-animated {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    left: 0;
    opacity: 1;
}
.progress-bar__value--1 {
    position: absolute;
    top: -27px;
    right: -20px;
    opacity: 0;
}
.progress-bar__value--1.js-animated {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    right: 0;
    opacity: 1;
}
/* progress bar #2 styles */

.progress-bar--2 {
    height: 20px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
@-webkit-keyframes progress-2-bg-animation {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 0 0, 42px 0;
    }
}
@keyframes progress-2-bg-animation {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 0 0, 42px 0;
    }
}
.progress-bar__bar-inner--2 {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.2)), linear-gradient(135deg, #5EEB5B, #5EEB5B 33%, #358600 33%, #358600 66%, #5EEB5B 66%);
    background-size: 100% 100%, 42px 100%;
    background-position: 0 0, 0 0;
    border-radius: 3px;
}
.progress-bar__bar-inner--2.js-animated {
    -webkit-animation: progress-2-bg-animation 1.5s linear 0s infinite;
    animation: progress-2-bg-animation 1.5s linear 0s infinite;
}
.progress-bar__skill--2 {
    position: absolute;
    top: -33px;
    left: 0;
    opacity: 0;
}
.progress-bar__skill--2.js-animated {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    top: -23px;
    opacity: 1;
}
.progress-bar__value--2 {
    position: absolute;
    top: -33px;
    right: 0;
    opacity: 0;
}
.progress-bar__value--2.js-animated {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    top: -23px;
    opacity: 1;
}
/* progress bar #3 styles */

.progress-bar--3 {
    height: 5px;
    background-color: #efefef;
}
.progress-bar--3:nth-child(1) .progress-bar__bar-inner,
.progress-bar--3:nth-child(1) .progress-bar__value {
    background-color: #F40076;
}
.progress-bar--3:nth-child(1) .progress-bar__bar-inner:after,
.progress-bar--3:nth-child(1) .progress-bar__value:after {
    border-top-color: #F40076;
}
.progress-bar--3:nth-child(2) .progress-bar__bar-inner,
.progress-bar--3:nth-child(2) .progress-bar__value {
    background-color: #1A936F;
}
.progress-bar--3:nth-child(2) .progress-bar__bar-inner:after,
.progress-bar--3:nth-child(2) .progress-bar__value:after {
    border-top-color: #1A936F;
}
.progress-bar--3:nth-child(3) .progress-bar__bar-inner,
.progress-bar--3:nth-child(3) .progress-bar__value {
    background-color: #2274A5;
}
.progress-bar--3:nth-child(3) .progress-bar__bar-inner:after,
.progress-bar--3:nth-child(3) .progress-bar__value:after {
    border-top-color: #2274A5;
}
.progress-bar__skill--3 {
    position: absolute;
    top: -24px;
    left: -20px;
    opacity: 0;
}
.progress-bar__skill--3.js-animated {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    left: 0;
    opacity: 1;
}
.progress-bar__value--3 {
    position: absolute;
    top: -43px;
    display: inline-block;
    padding: 3px 8px;
    font-size: 10px;
    color: #fff;
    opacity: 0;
}
.progress-bar__value--3:after {
    position: absolute;
    left: 50%;
    bottom: -10px;
    display: block;
    width: 0;
    height: 0;
    content: '';
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top: 5px solid;
}
.progress-bar__value--3.js-animated {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0.45s;
    top: -33px;
    opacity: 1;
}
/* progress bar #4 styles */

.progress-bar--4 {
    height: 3px;
    background-color: #efefef;
}
.progress-bar__bar-inner--4 {
    background-color: #000;
}
.progress-bar__bar-inner--4:after {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 8px;
    height: 8px;
    content: '';
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #000;
    border-radius: 50%;
}
.progress-bar__value--4 {
    position: absolute;
    top: -22px;
    font-size: 10px;
    opacity: 0;
}
.progress-bar__value--4.js-animated {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0.45s;
    opacity: 1;
}
.progress-bar__skill--4 {
    position: absolute;
    top: -22px;
    left: -20px;
    opacity: 0;
}
.progress-bar__skill--4.js-animated {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    left: 0;
    opacity: 1;
}
/* progress bar #5 styles */

.progress-bar--5 {
    height: 30px;
    background-color: #f7f7f7;
}
.progress-bar--5:nth-child(1) .progress-bar__bar-inner {
    background-color: #57B8FF;
}
.progress-bar--5:nth-child(2) .progress-bar__bar-inner {
    background-color: #4E148C;
}
.progress-bar--5:nth-child(3) .progress-bar__bar-inner {
    background-color: #AF1B3F;
}
.progress-bar__skill--5 {
    position: absolute;
    top: 50%;
    left: 10px;
    color: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
}
.progress-bar__skill--5.js-animated {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    opacity: 1;
}
.progress-bar__value--5 {
    position: absolute;
    top: 50%;
    color: #fff;
    -webkit-transform: translateX(-100%) translateX(-10px) translateY(-50%);
    transform: translateX(-100%) translateX(-10px) translateY(-50%);
    opacity: 0;
    z-index: 10;
}
.progress-bar__value--5.js-animated {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0.45s;
    opacity: 1;
}

HTML

<div class="container">
    <h1>Animated <span>Progress</span> Bars</h1>
    <div class="submenu">
        <div class="submenu__item">
            <a href="https://github.com/eisenfox/animated-progress-bars" title="Check on GitHub" target="_blanc"> <i class="material-icons">mood</i>Check on GitHub</a>
        </div>
    </div>
    <div class="content-block">
        
        <div class="content-block__effect">
            <h2>Progress bar #1</h2>
            <div class="progress-container">
                
                <div class="progress-bar" data-effect="1" data-value="75" data-skill="Photoshop"></div>
                
                <div class="progress-bar" data-effect="1" data-value="42" data-skill="Illustrator"></div>
                
                <div class="progress-bar" data-effect="1" data-value="96" data-skill="Sketch"></div>
                
                <button class="play-animation" type="button">Replay Animation</button>
            </div>
        </div>
        
        <div class="content-block__effect">
            <h2>Progress bar #2</h2>
            <div class="progress-container">
                
                <div class="progress-bar" data-effect="2" data-value="24" data-skill="Photoshop"></div>
                
                <div class="progress-bar" data-effect="2" data-value="71" data-skill="Illustrator"></div>
                
                <div class="progress-bar" data-effect="2" data-value="100" data-skill="Sketch"></div>
                
                <button class="play-animation" type="button">Replay Animation</button>
            </div>
        </div>
        
        <div class="content-block__effect">
            <h2>Progress bar #3</h2>
            <div class="progress-container">
                
                <div class="progress-bar progress-bar--lg-offset progress-bar--aligned-values" data-effect="3" data-value="96" data-skill="Photoshop"></div>
                
                <div class="progress-bar progress-bar--lg-offset progress-bar--aligned-values" data-effect="3" data-value="88" data-skill="Illustrator"></div>
                
                <div class="progress-bar progress-bar--lg-offset progress-bar--aligned-values" data-effect="3" data-value="51" data-skill="Sketch"></div>
                
                <button class="play-animation" type="button">Replay Animation</button>
            </div>
        </div>
        
        <div class="content-block__effect">
            <h2>Progress bar #4</h2>
            <div class="progress-container">
                
                <div class="progress-bar progress-bar--lg-offset progress-bar--aligned-values progress-bar--no-overflow" data-effect="4" data-value="45" data-skill="Photoshop"></div>
                
                <div class="progress-bar progress-bar--lg-offset progress-bar--aligned-values progress-bar--no-overflow" data-effect="4" data-value="36" data-skill="Illustrator"></div>
                
                <div class="progress-bar progress-bar--lg-offset progress-bar--aligned-values progress-bar--no-overflow" data-effect="4" data-value="100" data-skill="Sketch"></div>
                
                <button class="play-animation" type="button">Replay Animation</button>
            </div>
        </div>
        
        <div class="content-block__effect">
            <h2>Progress bar #5</h2>
            <div class="progress-container">
                
                <div class="progress-bar progress-bar--aligned-values" data-effect="5" data-value="69" data-skill="Photoshop"></div>
                
                <div class="progress-bar progress-bar--aligned-values" data-effect="5" data-value="84" data-skill="Illustrator"></div>
                
                <div class="progress-bar progress-bar--aligned-values" data-effect="5" data-value="96" data-skill="Sketch"></div>
                
                <button class="play-animation" type="button">Replay Animation</button>
            </div>
        </div>
    </div>
</div>

5 Animated progress bars

h5, bar, chart

编辑器支持Emmet

快捷键

5 Animated progress bars

h5, bar, chart

一款有趣的圣诞布丁滑块（进度条）控件

使用SVG实现的蛇形（S形）进度条

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：