Churro chart (Bulma 0.7.5)

by jorgeluis

HTML

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<div id="app" class="container">

    <section class="section">
        <div class="churro">
          <span class="churro-piece has-background-info" style="width:45%"></span>
          <span class="churro-piece has-background-success" style="width:35%"></span>
          <span class="churro-piece has-background-danger" style="width:20%"></span>
        </div>
    </section>

</div>

CSS

.churro {
  line-height: 0.01;
  height: 6px;
  border-radius: 3px;
  background-color: #ddd;
}

.churro-piece {
  display: inline-block;
  margin-right: -0.26em;
  height: 6px;
  width: 15px;
}

.churro-piece:first-of-type {
  border-radius: 3px 0 0 3px;
}

.churro-piece:last-of-type {
  border-radius: 0 3px 3px 0;
}

JavaScript

const app = new Vue()
app.$mount('#app')