Comments (6)
kottenator
commented on May 24, 2024
Could you, please, give me the code fragment and exact version of Safari and OS that you use? (so I could reproduce the bug)
from jquery-circle-progress.
mattmezza
commented on May 24, 2024
Safari version is: Version 8.0.2 (10600.2.5)
OS: Mac OS X Yosemite Version 10.10.1
I have this Polymer element
<polymer-element name="gm-circle-progress" attributes="percentage numcfu">
<template>
<!-- CSS -->
<link rel="stylesheet" href="circular-progress/progress.css">
<div id="pieProgress" class="pie_progress" role="progressbar" data-goal="{{percentage}}" style="margin-bottom: 20px;" data-speed="35" data-barsize="7" data-barcolor="#0943a0">
<div id='percentage' class="pie_progress__number">{{percentage}}</div>
<div id='numcfu' class="pie_progress__label">{{numcfu}} CFU</div>
</div>
</template>
<!-- JS -->
<script src="../../bower_components/jquery-circle-progress/dist/circle-progress.js"></script>
<script src="main.js"></script>
</polymer-element>css linked is this
.pie_progress {
text-align: center;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.pie_progress svg {
margin: 0 auto;
}
.pie_progress__content,
.pie_progress__number,
.pie_progress__label,
.pie_progress__icon {
width: 100%;
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.pie_progress__number {
font-size: 42px;
}
.pie_progress__label {
margin-top: 32px;
font-size: 12px;
}and the js file linked (apart from the plugin itself) is this:
Polymer('gm-circle-progress', {
percentage: 0,
numcfu: "0/180",
observe: {
percentage: 'go'
},
ready: function() {
},
go: function() {
this.$.pieProgress.percentage = this.$.percentage;
$(this.$.pieProgress).circleProgress({
value: this.percentage/100,
size: 140,
startAngle: -Math.PI/2,
fill: {
color: ['#0943a0']
}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this.percentage).html(parseInt(100 * stepValue) + '%');
});
}
});The web component is instanced in a web page as follows:
...
<body>
...
<gm-circle-progress id="circleProgress" percentage="100" numcfu="180"></gm-circle-progress>
...
</body>
...if you want you can browse the code from GitHub at this link.
from jquery-circle-progress.
kottenator
commented on May 24, 2024
Just tested on Safari 8 (via SauceLabs virtual machine) - rounded corners and color fill seem to work fine. It should be something with your example. I need some time to dig it
from jquery-circle-progress.
kottenator
commented on May 24, 2024
I found few problems:
1. Black fill
You write:
.circleProgress({
fill: {
color: ['#0943a0']
}
})This isn't correct. You should write:
.circleProgress({
fill: {
color: '#0943a0'
}
})Probably all other browsers convert ['#abc'] to "#abc" but not Safari.
2. Rounded arc corners
You should configure them in JS:
.circleProgress({
lineCap: 'round'
})Btw, I use <canvas>, not <svg> (just FYI, because I saw you set some styles for SVG)
Have I solved your problem?
from jquery-circle-progress.
mattmezza
commented on May 24, 2024
Yes Sir,
the problem was, as you stated, that all other browsers convert ['#abc'] to "#abc" but not Safari.
Now it works very well for both colors and shape in all browsers.
Thank you so much for the time you spent investigating on our code and thank you so much for the efforts you put on maintaining this project.
from jquery-circle-progress.
kottenator
commented on May 24, 2024
You are welcome, I'm glad that my little project is useful
from jquery-circle-progress.
Related Issues (20)
- Adding to Google Web Designer
- Drawing a rectangle
- Unable to import in a vue project
- Add a drop shadow to the circles
- Conflict With Other Libraries (Waypoints) when loading with RequireJs, Loads jquery twice
- Progress Bar is moving faster than percentage HOT 1
- RTL HOT 1
- Arc inside circle
- Load animation on viewport
- NaN
- allow passing custom jQuery into UMD factory
- Text in the middle of the circle HOT 5
- How to stop and start (circleProgress)
- How to Change Color Dynamically on "circle-animation-progress"
- Can it be set as 100% based on Seconds? HOT 1
- startAngle seems HOT 2
- [Solved] Change the class
- Can we make the color change at 100% and above?
- How to add gradient color through html like the way we add color ?? (<div class="circle" data-fill="{ "color": "rgba(0, 0, 0, .3)" }" ></div>) HOT 1
- No onDone function support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-circle-progress.