jQuery+CSS3水流填充动画的文件上传进度指示器

Porthole progress indicator, 带变形动画的圆形上传按钮。

html5, progress

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var uploadsTab = document.querySelector('.uploadsTab');
var porthole = document.querySelector('.porthole');
var portholeFill = document.querySelector('.portholeFill');
var percentageComplete = 0;
var portholeVisibleClass = 'uploadsTabPortholeVisible';
var rubberDuckyClass = 'portholeRubberDuckyVisible';
var rubberDuckyAnimationDuration = 8000;
var maybeShowRubberDuckyHandle = null;
var removeRubberDuckyHandle = null;

setTimeout(simulateUpload, 2000);

function simulateUpload() {
    // Start at 0%
    percentageComplete = 0;
    showPercentage();
    portholeFill.offsetTop;

// Show the progress indicator and start making progress
    uploadsTab.classList.add(portholeVisibleClass);
    makeProgress();

// Maybe show the Easter egg
    porthole.classList.remove(rubberDuckyClass);
    maybeShowRubberDucky();
    maybeShowRubberDuckyHandle = setInterval(maybeShowRubberDucky, rubberDuckyAnimationDuration);
};

function makeProgress() {
    percentageComplete += Math.random() * 5;
    showPercentage();

if (percentageComplete >= 100) {
        clearInterval(maybeShowRubberDuckyHandle);
        clearTimeout(removeRubberDuckyHandle);
        uploadsTab.classList.remove(portholeVisibleClass);
        setTimeout(simulateUpload, 2000);
    } else {
        setTimeout(makeProgress, 500);
    }
}

function showPercentage() {
    var transform = 'translateY(-' + percentageComplete + '%)';
    portholeFill.style['-webkit-transform'] = transform;
    portholeFill.style['transform'] = transform;
}

function maybeShowRubberDucky() {
    // It's less likely in production!
    var chance = 0.25;

if (Math.random() > chance) {
        return;
    }

porthole.classList.add(rubberDuckyClass);
    removeRubberDuckyHandle = setTimeout(function() {
        porthole.classList.remove(rubberDuckyClass);
    }, rubberDuckyAnimationDuration);
}

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
    background-color: #3f4652;
}
.uploadsTab {
    height: 76px;
    left: 50%;
    margin: -38px 0 0 -38px;
    position: absolute;
    top: 50%;
    width: 76px;
}
.uploadsTab > a {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 10px;
    -webkit-transition: color 0.3s, -webkit-transform 0.3s;
    transition: color 0.3s, -webkit-transform 0.3s;
    transition: color 0.3s, transform 0.3s;
    transition: color 0.3s, transform 0.3s, -webkit-transform 0.3s;
    width: 100%;
}
.uploadsTab > a:before {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE2cHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDE2IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zICgxMTk3MCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2xpY2UgMTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxwYXRoIGQ9Ik04LjcsMC4yIEM4LjYwNDk4MDQ3LDAuMTkyNzQ5MDIzIDguNiwwLjEgOC41LDAuMSBMOC40LDQuMjc0MzU4NjRlLTE1IEM4LjIsLTAuMSA3LjksLTAuMSA3LjcsNC4yNzQzNTg2NGUtMTUgQzcuNyw0LjI3NDM1ODY0ZS0xNSA3LjYsNC4yNzQzNTg2NGUtMTUgNy42LDAuMSBDNy41LDAuMSA3LjUsMC4yIDcuNCwwLjIgTDAuNCw2LjIgQzIuOTk3NjAyMTdlLTE1LDYuNiAtMC4xLDcuMiAwLjMsNy42IEMwLjcsOCAxLjMsOC4xIDEuNyw3LjcgTDcsMy4yIEw3LDE5IEM3LDE5LjYgNy40LDIwIDgsMjAgQzguNiwyMCA5LDE5LjYgOSwxOSBMOSwzLjIgTDE0LjMsNy44IEMxNC41LDcuOSAxNC44LDggMTUsOCBDMTUuMyw4IDE1LjYsNy45IDE1LjgsNy43IEMxNi4xLDcuMiAxNi4xLDYuNiAxNS43LDYuMiBMOC43LDAuMiBaIiBpZD0iU2hhcGUiIGZpbGw9IiNGRkZGRkYiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+) center / contain no-repeat;
    content: '';
    display: block;
    margin: 0 auto 5px;
    height: 36px;
    width: 36px;
}
.uploadsTabPortholeVisible > a {
    color: transparent;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}
.porthole {
    background-color: #4e535c;
    border-radius: 50%;
    height: 100%;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve"><circle fill="#FFFFFF" cx="50" cy="50" r="50"/></svg>');
    overflow: hidden;
    position: relative;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    width: 100%;
    z-index: -1;
}
.uploadsTabPortholeVisible > .porthole {
    -webkit-transform: scale(1);
    transform: scale(1);
}
.portholeFill {
    background-color: #00c4cc;
    bottom: -100%;
    height: 100%;
    position: absolute;
    width: 100%;
}
.uploadsTabPortholeVisible > .porthole > .portholeFill {
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}
.portholeFill:before {
    -webkit-animation: moveRight 3s linear infinite;
    animation: moveRight 3s linear infinite;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNDYgNDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ2IDQ2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4KPHBhdGggZmlsbD0iIzAwMDAwMCIgZmlsbC1vcGFjaXR5PSIwLjIiIGQ9Ik00Niw0MS41YzAsMC0xMS41LTQtMjMsMHMtMjMsMC0yMywwYzAsNi42LDAsNCwwLDRoNDZWNDEuNXoiLz4KPHBhdGggZmlsbD0iIzAwQzRDQyIgZD0iTTQ2LDQyYzAsMC0xMS41LTQtMjMsMFMwLDQyLDAsNDJjMCw2LjYsMCw0LDAsNGg0NlY0MnoiLz4KPC9zdmc+Cg==) 0 100% / 75px 46px repeat-x;
    content: '';
    height: 100%;
    margin-top: 1px;
    position: absolute;
    right: 0;
    top: -100%;
    width: 500%;
}
@-webkit-keyframes moveRight {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    100% {
        -webkit-transform: translateX(60%);
        transform: translateX(60%);
    }
}
@keyframes moveRight {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    100% {
        -webkit-transform: translateX(60%);
        transform: translateX(60%);
    }
}
.portholeFill:after {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0NiA0NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDYgNDYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjZmFjZjU4IiBkPSJNNDEuMSwxNWMwLjEtMC40LDAuMS0wLjgsMC4xLTEuMkM0MS4yLDkuMiw0MC40LDAsMjcuNSwwQzE2LjQsMCwxNC4yLDguMywxNC4yLDEyLjlTMTguMywyMywxOC4zLDIzCglzLTMuNywxLjgtNy44LDEuOFM1LjMsMjMsMi40LDIyLjVzLTMuOCwxMy44LDAuOCwxOC45UzEzLjcsNDYsMjIuOSw0NnMyMi45LDAsMjIuOS05LjJTMzYuNywyMywzNi43LDIzczAuOS0wLjksMS45LTIuMwoJYzAuMSwwLDAuMywwLDAuNCwwYzQuMSwwLDEwLjEtNS4xLDUtNS4xQzQzLDE1LjYsNDIsMTUuNCw0MS4xLDE1TDQxLjEsMTV6IE0zMi42LDEzLjhjMS4zLDAsMi4zLTEsMi4zLTIuM3MtMS0yLjMtMi4zLTIuMwoJcy0yLjMsMS0yLjMsMi4zUzMxLjMsMTMuOCwzMi42LDEzLjh6Ii8+CjxjaXJjbGUgZmlsbD0iIzAwMDAwMCIgY3g9IjMzLjQiIGN5PSIxMiIgcj0iMiIvPgo8L3N2Zz4K) 0 0 / contain no-repeat;
    content: '';
    display: none;
    height: 20px;
    left: -20px;
    position: absolute;
    top: -10px;
    width: 20px;
}
.portholeRubberDuckyVisible > .portholeFill:after {
    -webkit-animation: rubberDuckyFloating 8s linear infinite;
    animation: rubberDuckyFloating 8s linear infinite;
    display: block;
}
@-webkit-keyframes rubberDuckyFloating {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    50% {
        -webkit-transform: translate(0, -5px);
        transform: translate(0, -5px);
    }
    60% {
        -webkit-transform: translate(20px, 0);
        transform: translate(20px, 0);
    }
    70% {
        -webkit-transform: translate(36px, -3px);
        transform: translate(36px, -3px);
    }
    80% {
        -webkit-transform: translate(56px, 0);
        transform: translate(56px, 0);
    }
    90% {
        -webkit-transform: translate(76px, -3px);
        transform: translate(76px, -3px);
    }
    100% {
        -webkit-transform: translate(96px, 0);
        transform: translate(96px, 0);
    }
}
@keyframes rubberDuckyFloating {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    50% {
        -webkit-transform: translate(0, -5px);
        transform: translate(0, -5px);
    }
    60% {
        -webkit-transform: translate(20px, 0);
        transform: translate(20px, 0);
    }
    70% {
        -webkit-transform: translate(36px, -3px);
        transform: translate(36px, -3px);
    }
    80% {
        -webkit-transform: translate(56px, 0);
        transform: translate(56px, 0);
    }
    90% {
        -webkit-transform: translate(76px, -3px);
        transform: translate(76px, -3px);
    }
    100% {
        -webkit-transform: translate(96px, 0);
        transform: translate(96px, 0);
    }
}

HTML

Porthole progress indicator, 带变形动画的圆形上传按钮。

html5, progress

编辑器支持Emmet

快捷键

Porthole progress indicator, 带变形动画的圆形上传按钮。

html5, progress

HTML5 CSS3带上传列表和进度动画的多文件上传控件

jQuery+iziModal.js邮件发送成功弹出框提示信息条动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：