HTML5 / CSS3布局显示任务运行状态 [英] HTML5/CSS3 layout to show tasks running status

问题描述

我需要创建一个设计来展示任务状态，即运行/挂起/失败/通过，如下面的屏幕截图所示。

I need to create a design to showcase the task status i.e. running/pending/failed/passed as shown in the below screenshot.

如何使用HTML5 / CSS3创建它？

或者，任何达到相同目标的指针都会有很大的帮助。

or,any pointers to achieve the same will be of great help.

提前致谢，
Manish Kumar

Thanks in advance, Manish Kumar

推荐答案

你可以像下面的代码那样做。需要进行一些调整以获得您想要的确切结果（如图像），但我相信它会让您顺利进行。

You could do it like the following code. It will need some tweaking to get the exact result you want (like images), but I believe it will get you on your way.

我添加了一点点jQuery的'进步'栏。通过使用 data-progress （使用百分比!!!），您可以定义进度的大小。

I've added a little bit of jQuery for 'progress' bars. By using the data-progress (use percentage!!!) you can define how far the progress is.

作为替代方案，您可以将 data-progress =90％更改为 style =width：90％使其成为100％HTML / CSS。

As an alternative to the you could change the data-progress="90%" to style="width: 90%" which makes it 100% HTML/CSS.

$(function() {
	$('.progress>div').each(function() {
  	$(this).css('width', $(this).data('progress') );
  });
});

* {
  box-sizing: border-box;
}
body {
  background: white;
}
.project {
  width: 400px;
  margin-bottom: 1em;
}
  .project > div {
    display: inline-block;
    margin: 0 -5px 0 0;
    vertical-align: middle;
  }
.task {
  width: 2em;
  height: 2em;
  border: .4em solid #E4E4E7;
  background: #E4E4E7;
  border-radius: 100%;
}
.progress {
  width: calc( 50% - 3em);
  height: .6em;
  padding: .2em 0;
  background: #E4E4E7;
  position: relative;
}
  .progress>div {
    height: .2em;
    left: -.4em;
    right: -.4em;
    position: absolute;
  }
.pending { background: #F8AC59; }
.running { background: #1C84C6; }
.passed { background: #1AB394; }
.failed { background: #ED5565; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project">
  <div class="task pending"></div>
  <div class="progress"><div> </div> </div>
  <div class="task"></div>
  <div class="progress"><div> </div></div>
  <div class="task"></div>
</div>

<div class="project">
  <div class="task running"></div>
  <div class="progress"><div class="running" data-progress="90%"> </div> </div>
  <div class="task"></div>
  <div class="progress"><div> </div></div>
  <div class="task"></div>
</div>

<div class="project">
  <div class="task passed"></div>
  <div class="progress"><div class="passed"> </div> </div>
  <div class="task passed"></div>
  <div class="progress"><div class="passed"> </div></div>
  <div class="task passed"></div>
</div>

<div class="project">
  <div class="task failed"></div>
  <div class="progress"><div> </div> </div>
  <div class="task"></div>
  <div class="progress"><div> </div></div>
  <div class="task"></div>
</div>

<div class="project">
  <div class="task passed"></div>
  <div class="progress"><div class="passed"> </div> </div>
  <div class="task passed"></div>
  <div class="progress"><div class="passed"> </div></div>
  <div class="task passed"></div>
</div>

<div class="project">
  <div class="task failed"></div>
  <div class="progress"><div class="failed"> </div> </div>
  <div class="task failed"></div>
  <div class="progress"><div> </div></div>
  <div class="task"></div>
</div>

这篇关于HTML5 / CSS3布局显示任务运行状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！