teobais / percircle Goto Github PK

Circles should be able to be created/configured without having to provide an id ending with "circle".

That is, the library shouldn't care about the id format of a div and maybe, not even about the id of a div.

Official reporter: gustix

We should also be able to set the size of a percircle object through its js attributes.
For now, it's only available through <div id="custom-pb-color" class="big"></div>, but we should also give the user the possibility to set it through a command like below:

$("#custom-pb-color").percircle({
    ...
    size: big,
    ...
});

How to change the percentage value dynamically?

Either as a jQuery plugin or npm module.

One thing I just realised I overlooked with #59 was updating the README to cover the new building locally instructions.

It should be as simple as running npm start after installing dependencies, but the README should reflect this.

Presently percircles are only created when the DOM is ready. As an enhancement, we could also allow for percircles to be created programatically so it could be applied to elements that are introduced after the initial page load.

Silly me - didn't update my repo with your latest changes before posting this.

Here are the console's logs:

ReferenceError: jQuery is not defined
ReferenceError: $ is not defined

#52 demonstrates the way a percircle object could be customized so that it has an onscroll animation.

However, this is now only possible with a bit of magic (actually, with a lot of html 😂 ).
Thus, we should make the life our users easier and provide it out of the box, using an option, such as animateOnScroll: true

@toubou91 i display this type of output by overwrite an percircle

As with any other decent jQuery plugin, percircle should also have a table of the available options that can be passed to/customize it.

...to let users know how they can contribute to percircle.

The latest merge has JavaScript error.
You must not put a function declaration inside any other block.

It would be also nice if we gave the user the ability to restart the countdown timer (i.e. by clicking inside the circle).

Apparently, this might me needed in particular cases, so, once again, it should be implemented as a boolean attribute (i.e. reset: true).

Hi,

Just want to know if percircle support angular 2/4?

Hi, I'm a comment described in not so proper English. Could you fix me?

Looks like the code checks if(percent) before adding the text, when percent is 0, it won't get added.

I think this should be configurable via option. if (percent || options.forcePercentText) or something.

In my particular case, I'm using this plugin to display letter grades and the % progress to 100% (A+). If they received a 0, I'd still want to display F, but it gets hidden due to the above conditional. My current hack is to add .0001 to the % so it's never 0, but that's not very eloquent.

Provide a better implementation (maybe without having to define a div id, too), as there are still repeated parts in the html:

<span>50%</span>
<div class="slice">
    <div class="bar"></div>
    <div class="fill"></div>
</div>

User should be able to define a percircle item like:

<div data-percircle="50" class="c100 dark green">
</div>

As shown below:

Hi, thanks for this great plugin! However I had a quick question.

Is it possible with jQuery to add a class to the .percircle element so that the loading animation is triggered with a custom button for instance instead of when the page loads?

Thanks!

Currently, there are only specific colors supported from percircle. Future implementations should provide a more abstract way of defining colors (maybe without even having to declare their definitions in the css).

Hi,

Getting issue when i update dynamically value less than to previous (For example : 51 ->20), Than circle not work on clockwise.

Can you please provide me solution.

Thanks

Providing some built-in animations for the circle's percentage loading would be great.

Instead of the classic percentage label inside the circle, a current (and updateable) clock instance would be a great option.

percircle's progress bar should be updated based either on a minute or an hour basis (or we could have two progress bars with different colors, one for minutes and one for hours and update both of them, according to the current clock's instance).

Better implement this after closing #5 .

This will make the demo page look better.
Besides, it will also give us a better insight on the framework itself.

I recently received an email requesting this feature, so it would be nice if someone could have a look into it, otherwise I hope I can make some time during the Christmas period. Below the request:

Is there a way to custom this to server time, lets say 0% is server time 8AM and 100% is 4PM? So if a visitor loads the page up at noon, your percentage circle would show automatically 50%

add stars, forks, better intro, contributors list, etc.

hello..
i have create simple demo in asp.net ..
mozilla , crome etc... browser working BUT SAFARI Browser not working

please suggest me

Ok, we 're still on a beta version, but we have to start thinking of providing some serious tests here.
Thus, we could avoid/fix erroneous attitudes like #11 or #13.

I'm open on any solution/framework that one may suggest here.

Current implementation provides a smooth animation while hovering the mouse on and off the circle, according to the Firefox browser, but in my opinion, when it comes to Chrome, the animation for hovering off the circle, seems very abrupt.

I plan providing screenshots soon, too.

Currently, only percircle.css is being piped through our rtl module.
Our example's styles should also have an rtl version (maybe we need to rethink about the location of the example? is a whole folder needed for what it serves or should we return it back again to the root page?).

After the latest merge, the html data attribute for the progress bar color is data-color, whereas the respective js attribute is progressBarColor.

Ok, we 're still on a beta version and when on production, percircle will still remain a small library, but providing automated builds will obviously boost the maintenance, as a whole.

Some links:

• http://awestruct.org/auto-deploy-to-github-pages/
• https://github.com/mfenner/jekyll-travis
• https://medium.com/@nthgergo/publishing-gh-pages-with-travis-ci-53a8270e87db

According to https://stackoverflow.com/questions/69460136/percircle-dynamic-data-not-updating-in-vue-js and the latest trends, it would be nice to have a vuejs port of percircle

First of all, the fact that all of the source files are downloaded through an npm install command is wrong. That is, we have to provide tasks like linting, compiling, minifying, watching for changes (livereloading).

Grunt or Gulp?

Possible inspiration could be CircleProgress.

Configure watch task with livereload to automatically monitor files for changes and reload them to a browser.

Current implementation only performs compilation checks.

Alternatively (and preferably, I would also add), we could also move from Gulp to Webpack.
That would take percircle to the next step for sure.

Hello,
I have downloaded the git repo and have been unable to get anything to work. Directly after downloading, I opened the index.html page, and none of the circles show up. Any clue as to why this is?

What about a countdown timer?
Issue inspired from this tweet mention

I am currently thinking of two options for this (perdown) css class:

• countdown time
• (short) text to be displayed inside the circle object after time's up

Any feedback will be highly appreciated.

Is it possible to support decimals on the data percentage? e.g [51.4%]
There is no mention in the documentation ...

Include fork and star buttons

Hello all,

I've lately seen a few new user requirements coming up for percircle, which I would also appreciate as a user, if they have been in place.

However, I've lately been busy with other personal projects, etc., which led me to the conclusion that I cannot maintain it anymore.

If there's anyone interested in taking percircle to the next step, they could just share their thoughts in this thread .

Maintenance is defined as anything loyal to the scope of the project (i.e. investigation of issues opened from the users, further development of percircle, investigation for migration/porting to latest technologies, as react, etc.).

Cheers,
TB

Similar to teobais/percircle-vue#3