jQuery

【jQuery】サークルバー、プログレスバー、カウントダウンタイマーを簡単に追加するCircle Bars

November 6, 2017
circlebars

Circle Barsは、カウントダウンタイマーやプログレスバーを簡単に追加するために使用されるJqueryプラグインです。

What to include

CDN

<link rel="stylesheet" type="text/css" href="https://unpkg.com/circlebars@1.0.3/dist/circle.css">
<script src="https://unpkg.com/circlebars@1.0.3/dist/circle.js"></script>
<!-- Optionally add this to use a skin : -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/circlebars@1.0.3/dist/skins/whitecircle.css">
<link rel="stylesheet" type="text/css" href="node-modules/circlebars/dist/circle.css">
<script src="node-modules/circlebars/dist/circle.js"></script>
<!-- Optionally add this to use a skin : -->
<link rel="stylesheet" type="text/css" href="node-modules/circlebars/dist/skins/whitecircle.css">

Example

<div id="circle-1">
    <div class="loader-bg">
        <div class="text">00:00:00</div>
    </div>
</div>

<script>
    new Circlebar({
        element : "#circle-1"
    });
</script>

or

<div class="circle-2">
    <div class="loader-bg">
        <div class="text">00:00:00</div>
    </div>
</div>

<script>
    $(".circle-2").Circlebar({
</script>

or

<div class="circlebar">
    <div class="loader-bg">
        <div class="text">00:00:00</div>
    </div>
</div>

Options

<div id="circle-1" data-circle-dialWidth=10 data-circle-skin="white"></div>
$("#circle-1").Circlebar({
    maxValue : 20,
    fontSize : "14px",
    triggerPercentage : true
});

MIT