Commit 8b01dde5 authored by kurzum's avatar kurzum
Browse files

meter

parent c7b2ff86
......@@ -3,6 +3,7 @@
<html>
<head>
<link href="stylesheets/timeline.css" rel="stylesheet"/>
<link href="stylesheets/meter.css" rel="stylesheet"/>
</head>
<body>
......@@ -14,10 +15,35 @@
<div class="timeline" >
<div class="container left">
<div class="content">
<p><b>2020.05.01</b></p>
<p><a href="*/generic/*/2020.05.01">Generic</a></p>
May 1st, 2020
<a href="*/generic/*/2020.05.01">Generic</a>
<div class="meter">
<span style="width:50%;"><span class="progress"></span></span>
</div>
<a href="*/generic/*/2020.05.01">Mappings</a>
<div class="meter">
<span style="width:50%;"><span class="progress"></span></span>
</div>
<a href="*/generic/*/2020.05.01">Wikidata</a>
<div class="meter">
<span style="width:50%;"><span class="progress"></span></span>
</div>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2016</h2>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2016</h2>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2016</h2>
......
.meter {
height: 10px;
position: relative;
background: #f3efe6;
overflow: hidden;
}
.meter span {
display: block;
height: 100%;
}
.progress {
background-color: green;
animation: progressBar 3s ease-in-out;
animation-fill-mode:both;
}
@keyframes progressBar {
0% { width: 0; }
100% { width: 100%; }
}
......@@ -13,8 +13,10 @@ body {
position: relative;
max-width: 1200px;
margin: 0 auto;
float:left;
float: left;
width: 25%;
overflow-y: scroll;
height: 800px ;
}
/* The actual timeline (the vertical ruler) */
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment