我在css中创建了一个带有三个栏的加载器,代码如下所示。这些条形基于
:before
和 :after
。但如果我想要一个五杆装载机我该怎么做?
.loader,
.loader:before,
.loader:after {
background: black;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: black;
text-indent: -9999em;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
font-size: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -2em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 2em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
.loader-wrapper {
display: block;
position: relative;
height: 56px;
}
<div class="loader-wrapper">
<div class="loader">Loading...</div>
</div>
您可以使用CSS属性
ntnchild
。你的 HTML 和 CSS 将是这样的:
.loading-bar {
display: inline-block;
width: 4px;
height: 18px;
border-radius: 4px;
animation: loading 1s ease-in-out infinite;
}
.loading-bar:nth-child(1) {
background-color: #3498db;
animation-delay: 0;
}
.loading-bar:nth-child(2) {
background-color: #c0392b;
animation-delay: 0.09s;
}
.loading-bar:nth-child(3) {
background-color: #f1c40f;
animation-delay: .18s;
}
.loading-bar:nth-child(4) {
background-color: #27ae60;
animation-delay: .27s;
}
.loading-bar:nth-child(5) {
background-color: #000000;
animation-delay: .36s;
}
@keyframes loading {
0% {
transform: scale(1);
}
20% {
transform: scale(1, 2.2);
}
40% {
transform: scale(1);
}
}
<div class="loading">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
您只需一个元素和渐变即可轻松完成此操作。您只需控制
background-size
即可获得所需的动画
您可以在这里找到更多想法:https://css-loaders.com/bars/
.loader {
width: 70px;
height: 4em;
margin: 10px auto;
--g: no-repeat linear-gradient(black 0 0);
background: var(--g),var(--g),var(--g),var(--g),var(--g);
background-size:10px 100%;
background-position:
calc(0*100%/4),
calc(1*100%/4),
calc(2*100%/4),
calc(3*100%/4),
calc(4*100%/4);
animation:load 2s infinite linear;
}
@keyframes load{
0% {
background-size:10px 100%,10px 100%,10px 100%,10px 100%,10px 100%;
}
15% {
background-size:10px 50%,10px 100%,10px 100%,10px 100%,10px 100%;
}
30% {
background-size:10px 80%,10px 50%,10px 100%,10px 100%,10px 100%;
}
45% {
background-size:10px 100%,10px 80%,10px 50%,10px 100%,10px 100%;
}
60% {
background-size:10px 100%,10px 100%,10px 80%,10px 50%,10px 100%;
}
75% {
background-size:10px 100%,10px 100%,10px 100%,10px 80%,10px 50%;
}
90% {
background-size:10px 100%,10px 100%,10px 100%,10px 100%,10px 80%;
}
100% {
background-size:10px 100%,10px 100%,10px 100%,10px 100%,10px 100%;
}
}
<div class="loader"></div>
你应该使用这种杀手级的方式。
请添加新课程,例如:
<div class="loader more">Loading...</div>
并给出这种类型的CSS:
.loader.more {
position: absolute;
right: 0;
left: 95px;
top: -10px;
}
.loader.more:after {
left: 0;
}
希望这有帮助。
让我知道进一步的说明。
.loader,
.loader:before,
.loader:after {
background: black;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: black;
text-indent: -9999em;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
font-size: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -2em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 2em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
.loader-wrapper {
display: block;
position: relative;
height: 56px;
}
.loader.more {
position: absolute;
right: 0;
left: 95px;
top: -10px;
}
.loader.more:after {
left: 0;
}
<div class="loader-wrapper">
<div class="loader">Loading...</div>
<div class="loader more">Loading...</div>
</div>
我刚刚尝试过,我不知道这是一个完美的解决方案。
.loader,
.loader1,
.loader:before,
.loader1:before,
.loader:after
{
background: black;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader,.loader1 {
color: black;
text-indent: -9999em;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
font-size: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader1:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before, .loader1:before {
left: -2em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 2em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
.loader-wrapper {
display: block;
position: relative;
height: 56px;
}
.loader
{
position: relative;
left: 30px;
top: -45px;
}
<div class="loader-wrapper">
<div class="loader1">Loading...</div>
<div class="loader">Loading...</div>
</div>
我已经使用六个栏创建了加载程序。使用 CSS,您可以针对特定的 div 来实现动画延迟。正如 @João Pedro Schmitz 建议使用
nth-child
CSS 选择器来选择 div
。我在每个 10px
之后给出一个 div
的空间,并延迟开始每个 div 的动画 .12s
。
/* This provide animated ajax loading image. */
.animatedBox {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
}
.animatedBox div {
display: inline-block;
position: absolute;
left: 6px;
width: 6px;
background: #fff;
animation: animatedBox 2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.animatedBox div:nth-child(1) {
left: 20px;
animation-delay: -0.60s;
}
.animatedBox div:nth-child(2) {
left: 30px;
animation-delay: -0.48s;
}
.animatedBox div:nth-child(3) {
left: 40px;
animation-delay: -0.36s;
}
.animatedBox div:nth-child(4) {
left: 50px;
animation-delay: -0.24s;
}
.animatedBox div:nth-child(5) {
left: 60px;
animation-delay: -0.12s;
}
.animatedBox div:nth-child(6) {
left: 70px;
animation-delay: 0;
}
@-webkit-keyframes animatedBox {
0% {
top: 0px;
height: 30px;
background: #333;
}
50%,100% {
top: 0px;
height: 10px;
background: #333;
}
}
@keyframes animatedBox {
0% {
top: -11px;
height: 45px;
background: #333;
}
50%,100% {
top: 0px;
height: 25px;
background: #333;
}
}
<div class="animatedBox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>