Question

我想在网页的CSS3中创建一个不确定的进度条，如material design（第二个）。谁能分享必要的CSS魔法？我希望它的行为与视频完全相同，因此一端加速而另一端放慢速度直到它们切换。

我找不到任何可以这样工作的现有示例。

Answer 1

如果链接发生故障，请输入以下代码：

＆＃13;

sieve = s (drop 1 nats)
  where
    -- Recursive definition of s here
    -- s (h:t) = ???

＆＃13;

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%;}
}

＆＃13;

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代码，但是使用CSS transforms而不是left / width。

AGGREGATE_SELECTION_CHANGED_EVENT

Answer 4

超级简单的 CSS 加载栏：

main {
  margin: 100px auto;
  /* Parent should have position set to relative for not distubing 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>

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

4 个答案: