如何编写CSS关键帧以不确定材料设计进度条

Question

我想在网页的CSS3中制作一个不确定的进度条,如材料设计(第二个).谁能分享必要的CSS魔法？我希望它的行为与视频完全相同,因此一端正在加速而另一端正在减速直到它们切换为止.

我找不到任何可以这种方式工作的现有示例.

Answer 1

我在CodePen上找到了一个很好的例子.

如果链接断开,这里是代码:

HTML:

body{
  background:#ffffff;
  margin:50px 300px;
}

.slider{
  position:absolute;
  width:1000px;
  height:5px;
  overflow-x: hidden;
}

.line{
  position:absolute;
  opacity: 0.4;
  background:#4a8df8;
  width:150%;
  height:5px;
}

.subline{
  position:absolute;
  background:#4a8df8;
  height:5px; 
}
.inc{
  animation: increase 2s infinite;
}
.dec{
  animation: decrease 2s 0.5s infinite;
}

@keyframes increase {
   from { left: -5%; width: 5%; }
   to { left: 130%; width: 100%;}
}
@keyframes decrease {
   from { left: -80%; width: 80%; }
   to { left: 110%; width: 10%;}
}

CSS:

<div class="slider">
  <div class="line"></div>
  <div class="subline inc"></div>
  <div class="subline dec"></div>
</div>

Answer 2

一个超级简单的不确定加载器，带有纯 HTML 和 CSS

.progress-line, .progress-line:before {
  height: 3px;
  width: 100%;
  margin: 0;
}
.progress-line {
  background-color: #b3d4fc;
  display: -webkit-flex;
  display: flex;
}
.progress-line:before {
  background-color: #3f51b5;
  content: '';
  -webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@-webkit-keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}
@keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}

<div class="progress-line"></div>

Answer 3

超级简单的 CSS 加载栏：

main {
  margin: 100px auto;
  /* Parent should have position set to relative for not disturbing the height when the loading bar is hidden */
  position: relative; 
  /* Parent width will be the width of the loading bar */
  width: 400px; 
}

.loading-bar-container {
  height: 2px;
  width: 100%;
  background-color: #cfe0f0;
  position: absolute;
  overflow: hidden;
}

.loading-bar {
  height: 100%;
  width: 50%;
  background-color: #0000ff;
  position: absolute;
  left: -50%;
  animation: loading 2s ease-in 0.5s infinite;
}

@keyframes loading {
 0% {
  transform:translateX(0)
 }
 to {
  transform:translateX(400%)
 }
}

<main>
  <div class="loading-bar-container">
    <div class="loading-bar" />
  </div>
</main>