HTML5/CSS3 layout to show tasks running status [closed]

问题

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

How can i create it using HTML5/CSS3?

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

Thanks in advance, Manish Kumar

回答1:

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.

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.

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>

来源：https://stackoverflow.com/questions/36760716/html5-css3-layout-to-show-tasks-running-status

标签

css

html5

css3

css-transitions

css-animations