lugolabs / circles Goto Github PK

Hello,

I can't show only the text.

I don't want the circle and I don't want to use the default style for the text. I put false for these parameters :
styleWrapper,
styleText:
But the default style is still be used for the text.

How can I show only the text without the default style?

Is there a way to get it not to animate until it is visible on the page?

I have the element a ways down my page but it animates right away not when the user gets to it.

is there a way that the circles also display negative values and they would still fill up

I am looking to make circles work within my React.js app as my UX Designer has used in in her code. I am familiar with Highcharts and am assuming since you explain Circles is based on that approach, I can incorporate it into React the same way. But I do have some feedback on your documentation:

• It says you can install via npm but does not link to the npm package page or give the exact name of the package to install:

From the Documentation:

Install with grunt
Get the library
Install all the dependencies, run npm install
Once you have the dependencies installed, run grunt from the project directory. This will run the default grunt task which will minify circles.js to circles.min.js

I couldn't find a reference to it in the PR records either, though there is a trail of when it was added back in 2015

• There is no example of how to use Circles with React/Angular/Vue/etc and I think that is unfortunate as most web developers are now progressing in these libraries/frameworks

In the chances this 'issue' gets a response soon, I would appreciate someone sharing the exact npm package to use and if anyone has used Circles in a React app please share your approach as well.

Thanks!

Is there a way to make larger text size smaller to fit into the circle?

I have multiple circles and need to keep circle size the same. But some of the circles have large number and it will overflow (see picture). Would like to find out is there a way to auto adjust the text to fit into the circle or something that need to be done manually.

Thanks for your help.

Can we have the option for animation to start only when in screen view or scrolled too with an offset value?

i want to update the value and the maxvalue at the same time

Hi,

The issue that I'm having is when I set the 'text' as a non numeric value like in the following, I get the value of 'Nan' as default before the animation starts:

    Circles.create({
        id:         'circles-1',
        percentage: 78,
        radius:     60,
        width:      10,
        text:       'Text',
        colors:     ['#eee', '#d48425'],
        duration:   400
    })  

Here is a preview: http://imgur.com/LThJfth

Is there any way to fix this?

How can I show the value is zero. Every time I set reset back to zero the text value becomes transparent or not displayed at I can't really tell which. Thanks

Everything works great so far , i just can't figure out how to remove the decimals that will be displayed when the Value counts up..thanks a lot 👍

We're having trouble using this with ES6 imports?

We've tried:

import 'circles';
import 'angular-circles';  // <-this works

and also

import Circles from 'circles';

It would be nice if we could use easing on the animation.

Hi,

Can you add the minified js file ?

thanks

Hi,

Is there a way to make second color linear-gradient in options, like this ?

Circles.create({
  id : "circle",
  radius : 45,
  value : 60,
  maxValue : 100,
  width : 7,
  text : 5,
  colors : ["#f1f1f1", "linear-gradient(#e66465, #9198e5)"],
  duration : 400,
  wrpClass : 'circles-wrp',
  textClasss : 'circles-text',
  styleWrapper : true,
  styleText : true
});

And give something similar to this (not necessary the same colors and shape) :

Is there a way to update values?

I'm trying that when the user performs certain action, i.e. press a button, the circle updates with a bigger percentage value.

Can I do that?

Thank you.

I would be very happy, if a bower package would be available

Hi,

Is there a way to display more data by mouse hover on circle or create a popup when click on the circle?

Is it possible to show the real value of percentage if greater than 100%?
Maybe with an option for different color of path if greater than 100%?

Thanks in advance,
\m

Could you update the animation to happen when the circle appears on the screen on scroll?

I love the project, but would like to be able to show both positive and negative percentages. It would be really nice if a plus sign (+) or a minus sign (-) could be added to the number in the center. (+75.25%) or (-75.25%) That way I can show percentage of increase or decrease.

Thanks!

now, need inside circls radius less than outside circls radius，help

If you find/replace all instance of "class" with "className" in the circles.js files, it works just fine. However, you run into issues whenever someone npm/yarn installs because the registered module doesn't contain those changes.

Hi, is it possible to chose the movement of filling of the circle (clockwise / counterclockwise)? How? Thanks

Hi,

This is more of a feature request, just want to know if it's possible to add a shape in front of the stroke. In my case I need to add a dot/circular shape to it e.g.

. I could see a case of someone needing an arrow on the end maybe.

Would it be possible to remove this tick of color when the value is 0?
Perhaps an option to show it or not?

Thank you for plugin but I found some bug in FF.
When I set:

duration: 1500

animation takes around 3 seconds. Also when I change duration to 5000 nothing changes...
Do you know where can be problem? Other browsers are fine...

Hey,
Pretty nice plugin, I am currently facing only one issue.
Can you please tell me how to stop animation by calling a javascript function. I was using it for file upload function where the upload percent value I get through ajax but the speed of getting values is so high the sometime last update command overwrites the new one.

Wouldn't it be convenient if we can change the background color of the inner circle? Now it is transparent, which is great because in most cases the background of a webpage will be white-ish. But for those times when using it in a dark theme for example, I think it would be a nice extra if you could parameterise the background and font color. I'd be happy to take a look at it if you're interested. Unless this feature already exists and I dumbly overlooked it?

This property is really in need.

Hello,

Can i have the percentage and number (and other values for that matter) defined in html ?

Take the example below:

<div class="circle" id="circles-1" data-percentage="10" data-number="10"></div>

Thanks

Is there a data-attribute for making the animation work counter-clockwise as apposed to clockwise?

Thanks,
-B.

hi, I'm from cdnjs. Recently we want to add your lib to https://cdnjs.com, could you please consider adding git tags for v0.0.6 and each released version in the future because we use git auto-update to add each released version to cdnjs automatically, it can help us maintain your lib the latest version to your lib users.
thank you very much!

cdnjs/cdnjs#9024

Great plugin. More of an enhancement but would it possible to pass values as data attributes on the div instead of in the js?

<div class="circle" id="circles-1" data-value="10"></div>

It's posible to asign different size to the value stroke to create something like the attached image?
Im know nothing of svg but if you say its possible i will start playing with the javascript until i get something similar

Are there any event handlers?

For example I need to change colors on every value updating. Is it possible now?

Hi,

Love this project. However, is there someway to make the circles responsive? As in, adjust the radius of the circles to adapt to the size of their containers so that when the browser re-sizes the circles do not overflow the containers.

Thanks.

I've not been able to achieve this via CSS, was wondering if there was some support in the library itself?

Is there a way to show multiple values in the SAME circle at the same time?

https://jsfiddle.net/bdombro/4cut9es5/3/

I am trying to override the font size of the text inside the circle by passing in a class name for textClass property in the constructor. But it seems the default font size gets priority

One type of sample loading objects:
http://widgets.better2web.com/loader/

With various types of animations with multiple values ​​being.

:D

Would be great to be able to download the plugin directly to my project.

Do you have a suggestion on how to make the start be the 06:00 position (bottom of circle) and then rotate clockwise from there?

Please, add viewbox svg for image svg can responsive all screen

Add UMD Wrapper, so Circles can be used directly from npm.

I don't see any difference when I set duration 1 or 1000.
Is there a way to make animation faster?