一款仿谷歌邮箱的材料化风格加载动画

一个从谷歌收件箱中获得启发的简单的物料预载器

JavaScript, CSS3, SVG

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("http://fonts.googleapis.com/css?family=Roboto:100,300");
html {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    text-align: center;
    margin: 2em;
    font-family: "Roboto", sans-serif;
    background-color: #353a43;
    color: #fff;
    display: table-cell;
    width: 100%;
    overflow: hidden;
    height: 100%;
    vertical-align: middle;
    font-weight: 300;
    cursor: default;
}
h1 {
    font-size: 2.8em;
    margin-bottom: 0;
    font-weight: 100;
}
button {
    color: #353a43;
    background-color: #eee;
    padding: 0.3em 0.8em;
    border: 0;
    border-radius: 3px;
    font-size: 0.95em;
    cursor: pointer;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16), 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
    border-bottom: solid 1px #353a43;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}
button:hover,
button:active {
    color: #486b93;
    background-color: #fff;
}
a {
    color: #B0B4BB;
    text-decoration: none;
    border-bottom: solid 1px #000A1B;
}
p {
    margin-bottom: 2em;
    color: #B0B4BB;
}

HTML

<h1>Prelodr</h1>
<p>A simple Material preloader inspired in
    <br> Google Inbox.</p>

<p>
    <button type="button" id="my-btn">Start</button>
</p>
<script src="https://cdn.jsdelivr.net/prelodr/latest/prelodr.min.js"></script>

一个从谷歌收件箱中获得启发的简单的物料预载器

JavaScript, CSS3, SVG

编辑器支持Emmet

快捷键

一个从谷歌收件箱中获得启发的简单的物料预载器

JavaScript, CSS3, SVG

HTML5 SVG很不错的一个红黄蓝三色粘稠融合加载动画

CSS3很酷的彗星旋转加载动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：