FED实验室 - 专注WEB端开发和用户体验

使用Circliful实现圆形进度条动画

JAVASCRIPT 煦涵 3974℃ 0评论

A jQuery Plugin for Making Circles

Circliful has a number of options that can be set as data attributes. Data attributes are the primary method for setting various options, such as the circle background color, fill color, and the percentage. All of the possible data attributes are available in theREADME on GitHub.

Using Circliful is similar to every other jQuery plugin. Just make sure you’re loading up jQuery prior to loading the Circliful JavaScript.

1. Include Circliful JavaScript and CSS

Include the JavaScript and CSS files from Circliful just like you would any other JavaScript or CSS file.

<link href="css/jquery.circlify.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.circliful.min.js"></script>

2. Add an element with the necessary data attributes

This is where you can define all the data attributes that are listed in the README. I typically use an empty div with the following data attributes: data-dimensiondata-textdata-infodata-widthdata-fontsizedata-percentdata-fgcolordata-bgcolordata-filldata-total, and data-part.

You’ll want to give your newly created element a unique ID to use as a selector in jQuery. I used circle-1 as the element ID for this example.

<div id="circle-1" data-dimension="250" data-text="85%" data-info="Sweet" data-width="30" data-fontsize="38" data-percent="85" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="100" data-part="85"></div>

3. Add necessary JavaScript

This tells Circliful which element to build the circle from. We want to target the ID that we gave to our empty element/div above.

<script>
$( document ).ready(function() {
        $('#circle-1').circliful();
    });
</script>

That’s it! You should now have a circle similar to the first circle in the example below. If you have any questions, feel free to leave a comment or get in touch with me directly.

You can find the necessary JavaScript and CSS on the Circliful GitHub page. You can see an example of Circliful in the embedded pen below.

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (1)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址