CSS3 锥形发光进度条

Tapered Glow Progress Bar

css3, bar

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.progress-bar {
    height: 3px;
    width: 100%;
    position: relative;
    z-index: 10;
    background-color: #55708d;
}
.progress-bar .progress {
    position: relative;
    height: 100%;
    background-color: #cfd6dd;
    transition: width 0.5s ease-out;
    border-radius: 0px 2px 2px 0px;
}
.progress-bar .glow {
    width: 60px;
    max-width: 100%;
    height: 100%;
    float: right;
}
.progress-bar .glow::before,
.progress-bar .glow::after {
    content: '';
    display: block;
    position: relative;
    border-radius: 0px 2px 2px 0px;
}
.progress-bar .glow::before {
    background: transparent;
    height: 100%;
    box-shadow: 0px 0px 10px #cfd6dd, 0px 0px 10px #04bfff;
    z-index: -5;
}
.progress-bar .glow::after {
    background: linear-gradient(to right, #3d5980 0%, transparent 100%);
    height: calc(100% + 10px + 10px);
    width: calc(100% + 10px);
    top: -10px;
    left: -10px;
    z-index: -3;
}
.label {
    font-family: Poppins;
    color: #cfd6dd;
    text-shadow: 0px 0px 2px #cfd6dd;
    font-size: 24px;
}
.fill-1 {
    animation: fill-1 0.5s ease-out 0s;
    animation-fill-mode: forwards;
    width: 0%;
}
.fill-2 {
    animation: fill-2 0.5s ease-out 0.5s;
    animation-fill-mode: forwards;
    width: 0%;
}
.fill-3 {
    animation: fill-3 0.5s ease-out 1s;
    animation-fill-mode: forwards;
    width: 0%;
}
@keyframes fill-1 {
    0% {
        width: 0%;
    }
    100% {
        width: 70%;
    }
}
@keyframes fill-2 {
    0% {
        width: 0%;
    }
    100% {
        width: 40%;
    }
}
@keyframes fill-3 {
    0% {
        width: 0%;
    }
    100% {
        width: 90%;
    }
}
.label.one {
    animation: label 0.5s ease-out 0s;
    animation-fill-mode: forwards;
    opacity: 0;
}
.label.two {
    animation: label 0.5s ease-out 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
.label.three {
    animation: label 0.5s ease-out 1.0s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes label {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 0.9;
        transform: translateY(0);
    }
}
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #3d5980;
    box-sizing: border-box;
}
body {
    padding: 60px 20px;
}
body .wrapper {
    max-width: 600px;
    margin: 0 auto;
}
body .wrapper .container {
    padding: 20px;
}
body .wrapper .container > * {
    margin-bottom: 10px;
}

HTML

Tapered Glow Progress Bar

css3, bar

编辑器支持Emmet

快捷键

Tapered Glow Progress Bar

css3, bar

CSS3 带进度条及完成状态的下载按钮

CSS3 外发光圆圈错觉式旋转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：