CSS3 原质化设计页面预加载动画

Material Design Preloader。邮箱加载邮件的等待动画。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

header [role="progressbar"][aria-busy="true"] {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 8px;
    width: 100%;
    background-color: #159756;
    -webkit-animation: preloader-background linear 3.5s infinite;
    animation: preloader-background linear 3.5s infinite;
}
header [role="progressbar"][aria-busy="true"]::before,
header [role="progressbar"][aria-busy="true"]::after {
    display: block;
    position: absolute;
    top: 0;
    z-index: 2;
    width: 0;
    height: 8px;
    background: #afa;
    -webkit-animation: preloader-front linear 3.5s infinite;
    animation: preloader-front linear 3.5s infinite;
    content: '';
}
header [role="progressbar"][aria-busy="true"]::before {
    right: 50%;
}
header [role="progressbar"][aria-busy="true"]::after {
    left: 50%;
}
@-webkit-keyframes preloader-background {
    0%, 24.9% {
        background-color: #159756;
    }
    25%,
    49.9% {
        background-color: #da4733;
    }
    50%,
    74.9% {
        background-color: #3b78e7;
    }
    75%,
    100% {
        background-color: #fdba2c;
    }
}
@keyframes preloader-background {
    0%, 24.9% {
        background-color: #159756;
    }
    25%,
    49.9% {
        background-color: #da4733;
    }
    50%,
    74.9% {
        background-color: #3b78e7;
    }
    75%,
    100% {
        background-color: #fdba2c;
    }
}
@-webkit-keyframes preloader-front {
    0% {
        width: 0;
        background-color: #da4733;
    }
    24.9% {
        width: 50%;
        background-color: #da4733;
    }
    25% {
        width: 0;
        background-color: #3b78e7;
    }
    49.9% {
        width: 50%;
        background-color: #3b78e7;
    }
    50% {
        width: 0;
        background-color: #fdba2c;
    }
    74.9% {
        width: 50%;
        background-color: #fdba2c;
    }
    75% {
        width: 0%;
        background-color: #159756;
    }
    100% {
        width: 50%;
        background-color: #159756;
    }
}
@keyframes preloader-front {
    0% {
        width: 0;
        background-color: #da4733;
    }
    24.9% {
        width: 50%;
        background-color: #da4733;
    }
    25% {
        width: 0;
        background-color: #3b78e7;
    }
    49.9% {
        width: 50%;
        background-color: #3b78e7;
    }
    50% {
        width: 0;
        background-color: #fdba2c;
    }
    74.9% {
        width: 50%;
        background-color: #fdba2c;
    }
    75% {
        width: 0%;
        background-color: #159756;
    }
    100% {
        width: 50%;
        background-color: #159756;
    }
}
* {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: Avenir Next, Helvetica Neue, Helvetica, Arial, sans-serif;
    background-color: #f5f5f5;
}
header {
    position: relative;
    width: 100%;
    height: 60px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    background-color: #fff;
}
main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center;
}
:root main > * + * {
    margin-top: 1em;
}
h1 {
    margin: 0;
    font-size: 2.2em;
    font-weight: 200;
}
p {
    margin: 0;
    font-size: 0.875em;
    font-weight: 400;
}

HTML

Material Design Preloader。邮箱加载邮件的等待动画。

编辑器支持Emmet

快捷键

Material Design Preloader。 邮箱加载邮件的等待动画。

使用纯CSS实现一款很棒的材料化设计日历（日程安排 | 计划管理）移动应用页面模板

CSS3 发送留言的动效页面的UI模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Material Design Preloader。邮箱加载邮件的等待动画。