东林博客

Postman官网loading css 效果

Postman官网加载时,有一个loading效果看着很不错,顺手整理了一下。

.pm-loader {
    display: inline-block;
    vertical-align: middle;
    border: 2px solid transparent;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    border-left: 2px solid #fff;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin: 0 8px;
    animation: spin 1s linear infinite;
}
.pm-loader.pm-loader-secondary {
    border-top-color: #F26B3A;
    border-right-color: #F26B3A;
    border-left-color: #F26B3A;
}
.pm-loader.pm-loader-xl {
    width: 32px;
    height: 32px;
    border-width: 3px;
}
.pm-page-center {
    top: 50%;
    left: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
}
@keyframes spin {
            0% {
                transform: rotateZ(0)
            }
            100% {
                transform: rotateZ(360deg)
            }
}
<div class="pm-page-center">
	<span class="pm-loader pm-loader-xl pm-loader-secondary"></span>
</div>


{{tip}}