jquery+css实现下载进度动画效果代码-html代码-BFW代码库

jquery+css实现下载进度动画效果代码

代码语言：html

所属分类：进度条

代码描述：jquery+css实现下载进度动画效果代码，点击下载按钮开始显示下载进度及动画效果。

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Nunito:400,700,300);
        body {
        font-family:'Nunito',sans-serif;
        background:#373e46;
}
#loading_line {
        width:0px;
        height:5px;
        background:blue;
}
.buttonContainer {
        position:absolute;
        left:50%;
        top:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
        text-align:center;
        cursor:pointer;
}
.buttonContainer .complete {
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        -webkit-transform:scale(1.9);
        transform:scale(1.9);
        color:#f9f9f9;
        -webkit-transition:all .3s ease;
        transition:all .3s ease;
        opacity:0;
}
.buttonContainer .complete.fadein {
        opacity:1;
        -webkit-transform:scale(1.5);
        transform:scale(1.5);
}
.buttonContainer #counter {
        color:#e91d62;
        font-size:19px;
        left:0;
        right:0;
        bottom:20px;
        margin:auto;
        display:none;
        position:absolute;
}
.buttonContainer .ball {
        position:absolute;
        left:0;
        right:0;
        top:-26px;
        margin:auto;
        width:40px;
        height:40px;
        border-radius:40px;
        background-color:#e91d62;
        -webkit-box-shadow:inset 1px 1px 1px 0px rgba(255,255,255,0.54);
        box-shadow:inset 1px 1px 1px 0px rgba(255,255,255,0.54);
        display:none;
}
.buttonContainer:before {
        content:"Download";
        display:block;
        text-transform:uppercase;
        color:#e91d62;
        font-weight:700;
        font-size:13px;
        -webkit-transform:translateY(38px);
        transform:translateY(38px);
        -webkit-transition:all .2s ease;
        transition:all .2s ease;
}
.buttonContainer.active {
        pointer-events:none;
}
.buttonContainer.active:before {
        opacity:0;
}
.buttonContainer.active .ball {
        -webkit-animation:jump 2s cubic-bezier(0.16,0.15,1,0.49) infinite;
        animation:jump 2s cubic-bezier(0.16,0.15,1,0.49) infinite;
}
.buttonContainer.active #button {
        stroke-dashoffset:290;
        width:300px;
        stroke-width:9;
        -webkit-animation:struk 2s cubic-bezier(0.16,0.15,1,0.49) infinite;
        animation:struk 2s cubic-bezier(0.16,0.15,1,0.49) infinite;
}
.buttonContainer #button {
        stroke-dasharray:411;
        stroke-dashoffset:0;
        marker-start:30;
        -webkit-transform-origin:50% 50%;
        transform-origin:50% 50%;
        -webkit-transition:all 0.4s cubic-bezier(0.18,0.89,0.32,1.28);
        transition:all 0.4s cubic-bezier(0.18,0.89,0.32,1.28);
}
@-webkit-keyframes jump {
        0% {
        -webkit-transform:translateY(0%);
        transform:t.........完整代码请登录后点击上方下载按钮下载查看