Skip to content

Latest commit

 

History

History
85 lines (72 loc) · 2.48 KB

README.md

File metadata and controls

85 lines (72 loc) · 2.48 KB
Raw

percircle

CSS Percentage Circle

#Demo Default circles:

Sample circles

Dark circles:

Dark circles

#Usage ####Load the module to your page

<!DOCTYPE HTML>
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="js/percircle.js"></script>
  <link rel="stylesheet" href="css/percircle.css">
</head>
</html>

Define the circle objects

Make sure each percircle's id ends with "circle".

Big blue circle marked with a percent of 50%:

<div id="bluecircle" class="c100 p50 big">
    <span>50%</span>
    <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
    </div>
</div>

Big blue circle

Default orange circle marked with a percent of 65%:

<div id="orangecircle" class="c100 p65 orange">
    <span>65%</span>
    <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
    </div>
</div>

Default orange circle

Default orange circle marked with a percent of 65%:

<div id="pinkcircle" class="c100 p82 small pink">
    <span>82%</span>
    <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
    </div>
</div>

Small pink circle

#Contribute Feel free to submit a pull request for the existing issues.

#Credits and More The original project was created from Andre Firchow and as I didn't find any similar here, I uploaded it.

However, the project loaded all the css transformations, in the percircle.css file. Now, it makes use of the jQuery selectors in order to do so.

In addition, by defining a percircle item for once (that is, by providing a div id, ending with "circle"), all the similar occurences of the specified percentage will be updated, without the need of defining a div id for the corresponding items. This means that if there are three "50%" percircles, only one of them could specify an id ending with "circle".