JSFiddle - React, Tailwind, and code Playground

by wen yongheng

HTML

<link rel="stylesheet" href="https://oggpmngp5.qnssl.com/mui/v3.4.0/mui.min.css">
<script src="https://oggpmngp5.qnssl.com/mui/v3.4.0/mui.min.js"></script>
<div class="mui-content-padded">
  <p>
    显示20%进度
  </p>
  <div class="mui-progressbar" id="progressDemo">
    <span></span>
  </div>
  <p>
    无限滚动进度条
  </p>
  <div class="mui-progressbar mui-progressbar-infinite">
    <span></span>
  </div>
  <p>
    自定义进度条颜色
  </p>
  <div id="demo5">
    <p class="mui-progressbar mui-progressbar-success" data-progress="20"><span></span></p>
    <p class="mui-progressbar mui-progressbar-warning" data-progress="30"><span></span></p>
    <p class="mui-progressbar mui-progressbar-danger" data-progress="50"><span></span></p>
    <p class="mui-progressbar mui-progressbar-royal" data-progress="80"><span></span></p>
  </div>

</div>

JavaScript

、、初始化progressDemo进度条
mui("#progressDemo").progressbar({
  progress: 20
}).show();
//自定义颜色示例
mui("#demo5 .mui-progressbar").each(function() {
  mui(this).progressbar({
    progress: this.getAttribute("data-progress")
  }).show();
});