炫酷CSS3预加载loading样式

PetitQ 其他代码 2019-1-30 2.61K 0 1

这是两款炫酷的 css3 loading 预加载样式。该 css3 loading 预加载样式通过简单的布局和 CSS 代码，来制作效果非常炫酷的 loading 预加载特效。

使用方法

在页面中引入 bootstrap 文件。

也想出现在这里？联系我们吧

<link rel="stylesheet" href="bootstrap.min.css">

HTML 结构

第一个 loading 效果的基本 HTML 结构如下。

```
<div class="container">
```
```
    <div class="row">
```
```
        <div class="col-md-12">
```
```
            <div class="preloader">
```

                <div class="loader loader-inner-1">

                    <div class="loader loader-inner-2">

                        <div class="loader loader-inner-3">

```
                        </div>
```
```
                    </div>
```
```
                </div>
```
```
            </div>
```
```
        </div>
```
```
    </div>
```
```
</div>
```

第二个 loading 效果的基本 HTML 结构如下。

```
<div class="container">
```
```
    <div class="row">
```
```
        <div class="col-md-12">
```
```
            <div class="preloader">
```

                <div class="loader"></div>

```
            </div>
```
```
        </div>
```
```
    </div>
```
```
</div>
```

CSS 样式

第一个 loading 效果的 CSS 样式如下。

```
.preloader{
```
```
    height: 100%;
```
```
    width: 100%;
```
```
    padding: 20px 0 20px;
```
```
    display: flex;
```
```
    flex-flow: column wrap;
```
```
    justify-content: center;
```
```
    align-content: center;
```
```
    align-items: center;
```
```
    perspective: 700;
```
```
}
```
```
.loader{
```
```
    text-align: center;
```
```
    margin: 5px;
```
```
    border-radius: 50%;
```
```
    border: 4px solid #fff;
```
```
    display: flex;
```
```
    flex-flow: column wrap;
```
```
    justify-content: center;
```
```
    align-content: center;
```
```
    align-items: center;
```
```
    transform-style: preserve-3d;
```
```
    position: relative;
```
```
}
```
```
.loader-inner-1{
```
```
    animation-delay: 0.2s;
```

    animation: change_first_circle 2s ease-in-out infinite;

```
}
```
```
.loader-inner-2{
```
```
    animation-delay: 0.2s;
```

    animation: change_second_circle 2s ease-in-out infinite;

```
}
```
```
.loader-inner-3{
```
```
    animation-delay: 0.2s;
```
```
    width: 100px;
```
```
    height: 100px;
```

    animation: change_last_circle 3s linear  infinite;

```
}
```
```
@keyframes change_first_circle {
```

    50%{ transform: rotateX(360deg) scale(0.8); }

```
}
```
```
@keyframes change_second_circle {
```

    50%{ transform: rotateY(360deg) scale(0.8); }

```
}
```
```
@keyframes change_last_circle {
```

    50%{ transform: rotateX(360deg) scale(0.8); }

```
}
```

第二个 loading 效果的 CSS 样式如下。

```
.preloader{
```
```
    height: 100px;
```
```
    width: 100px;
```
```
    margin: 30px auto 0;
```
```
    position: relative;
```
```
}
```
```
.loader{
```
```
    background-color: #fff;
```
```
    width: 5px;
```
```
    height: 5px;
```
```
    border-radius: 50px;
```
```
    position: relative;
```
```
    top: calc(50% - 2.5px);
```
```
    left: calc(50% - 2.5px);
```
```
}
```
```
.loader:before,
```
```
.loader:after{
```
```
    content: "";
```

    background: linear-gradient(45deg,transparent,rgba(255, 255, 255, .3),rgba(255, 255, 255, .3),transparent);

```
    width: 50px;
```
```
    height: 50px;
```
```
    border-top: 3px solid #fff;
```
```
    border-right: 3px solid #fff;
```
```
    border-radius: 0 50px 0px 0;
```
```
    transform-origin:  0% 100%;
```
```
    position: absolute;
```
```
    top: -47px;
```

    animation: loader 1s linear infinite;

```
}
```
```
.loader:after{
```
```
    border-top: none;
```
```
    border-right: none;
```
```
    border-bottom: 3px solid #fff;
```
```
    border-left: 3px solid #fff;
```
```
    border-radius: 0 0px 0px  50px;
```
```
    transform-origin:  100% 0%;
```
```
    top: 2px;
```
```
    right: 2px;
```
```
}
```
```
@keyframes loader{
```
```
    0%{ transform:rotate(0deg); }
```
```
    100%{ transform:rotate(360deg); }
```
```
}
```

炫酷 CSS3 预加载 loading 样式

已有 654 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

炫酷CSS3预加载loading样式

使用方法

HTML 结构

CSS 样式

炫酷 CSS3 预加载 loading 样式

相关文章

Bootstrap超酷进度条动画UI设计

控制animate.css动画的jquery插件

基于jQueryUI的炫酷3D立体滑块特效

发表回复取消回复

热销模板

其他代码

使用方法

HTML 结构

CSS 样式

炫酷 CSS3 预加载 loading 样式

相关文章

发表回复 取消回复

热销模板

发表回复取消回复