Support
Quality
Security
License
Reuse
kandi has reviewed CircleProgress and discovered the below as its top functions. This is intended to give you an instant insight into CircleProgress implemented functionality, and help decide if they suit your requirements.
You just DO WHAT THE FUCK YOU WANT TO.
default
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
How to make my timer more precise in SwiftUI?
struct TimerView: View {
//every Second change Circle and Value (Circle is small because of the animation)
let timerForText = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
let timerForCircle = Timer.publish(every: 0.001, on: .main, in: .common).autoconnect()
@State var progress : Double = 1.0
@State var timerSeconds : Int = 60
@State var endDate: Date? = nil
let customInverval : Int
var body: some View {
ZStack{
ProgressCircleView(progress: self.$progress, timerSeconds: self.$timerSeconds, customInterval: customInverval)
.padding()
.onReceive(timerForCircle){ _ in
decreaseProgress()
}
VStack{
Text("\(timerSeconds)")
.font(.system(size: 80))
.bold()
.onReceive(timerForText){ _ in
incrementTimer()
}.multilineTextAlignment(.center)
}
.accessibilityElement(children: .combine)
}.padding()
.onAppear {
endDate = Date(timeIntervalSinceNow: TimeInterval(customInverval))
}
}
func decreaseProgress() -> Void {
guard let endDate = endDate else { return}
progress = max(0, endDate.timeIntervalSinceNow / TimeInterval(customInverval))
if endDate.timeIntervalSinceNow <= 0 {
timerForCircle.upstream.connect().cancel()
}
}
func incrementTimer() -> Void {
guard let endDate = endDate else { return}
timerSeconds = max(0, Int(endDate.timeIntervalSinceNow.rounded()))
if endDate.timeIntervalSinceNow <= 0 {
timerForText.upstream.connect().cancel()
print("stop")
}
}
}
How to show firebase realtime data to Process Bar
<script>
var obtained = 75;
var total = 150;
var percent = obtained*100/total;
var percentage = "0.0";
var percent_pakan;
var percent_air;
// Firebase Tinggi Air
const listener = firebase.database().ref("tinggi")
.on("value", (snapshot) => {
var data = data.val();
percent_pakan = data.pakan;
percent_air= "0." + data.air;
});
let options = {
startAngle: -1.55,
size: 150,
value: percent_pakan,
fill: {gradient: ['#315ACD', '#4E75E2']}
}
$(".circle .bar").circleProgress(options).on('circle-animation-progress',
function(event, progress, stepValue){
$(this).parent().find("span").text(String(stepValue.toFixed(2).substr(2)) + "%");
});
$(".react .bar").circleProgress({
value: percent_air
});
</script>
-----------------------
// Progress Bar START
var tinggi = database.ref("tinggi");
var tinggi_awal = 0;
var tinggi_air = "0.0";
var tinggi_pakan = "0.0";
tinggi.on("value", function (data) {
tinggi_awal = data.val();
tinggi_pakan = "0." + tinggi_awal.pakan;
tinggi_air = "0." + tinggi_awal.air;
console.log(tinggi_air);
let optionsPakan = {
startAngle: -1.55,
size: 150,
value: tinggi_pakan,
fill: { gradient: ['#315ACD', '#4E75E2'] }
}
let optionsAir = {
startAngle: -1.55,
size: 150,
value: tinggi_air,
fill: { gradient: ['#315ACD', '#4E75E2'] }
}
$(".circle-pakan .bar").circleProgress(optionsPakan).on('circle-animation-progress',
function (event, progress, stepValue) {
$(this).parent().find("span").text(String(stepValue.toFixed(2).substr(2)) + "%");
});
$(".circle-air .bar").circleProgress(optionsAir).on('circle-animation-progress',
function (event, progress, stepValue) {
$(this).parent().find("span").text(String(stepValue.toFixed(2).substr(2)) + "%");
});
});
// Progress Bar END
}
Query 'data-value' to Populate Conditional If Statement
function Circle(selector) {
$(selector).each((i, el) => {
let $el = $(el);
let value = $el.data('value');
$el.circleProgress({
fill: { color: value < 0.5 ? 'red' : value < 0.75 ? 'yellow' : 'green' }
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text((stepValue * 100).toFixed(0) + '%');
});
});
};
Circle('.round');
$('.btn').on('click', () => Circle('.round'));
#circleBar {
margin-top: 50px;
text-align: center;
font-family: tahoma;
}
#circleBar .round {
min-height: 255px;
margin-top: 30px;
position: relative;
margin-bottom: 20px;
}
#circleBar .round strong {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
transform: translate(-50%);
font-size: 40px;
color: #212121;
font-weight: 100;
}
#circleBar span {
display: block;
color: #999;
font-size: 17px;
margin-top: 10px;
}
#circleBar span i {
color: #104723;
font-size: 22px;
margin-right: 7px;
}
section button:active {
background-color: #104723;
border-color: #b3ab7d;
}
section button:hover {
background-color: #104723;
border-color: #b3ab7d;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/site.css">
<section id="circleBar">
<h1>Morning Report Tracker</h1>
<p>By Location</p>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="round" data-value="0.87" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Kuwait</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.74" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Albania</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.44" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Australia</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.15" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Guam</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="round" data-value="0.77" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Thailand</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.74" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Syria</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.54" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Japan</span>
</div>
</div>
</div>
</div>
<button class="btn">Load Attendance</button>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js" integrity="sha512-6kvhZ/39gRVLmoM/6JxbbJVTYzL/gnbDVsHACLx/31IREU4l3sI7yeO0d4gw8xU5Mpmm/17LMaDHOCf+TvuC2Q==" crossorigin="anonymous"></script>
-----------------------
function Circle(selector) {
$(selector).each((i, el) => {
let $el = $(el);
let value = $el.data('value');
$el.circleProgress({
fill: { color: value < 0.5 ? 'red' : value < 0.75 ? 'yellow' : 'green' }
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text((stepValue * 100).toFixed(0) + '%');
});
});
};
Circle('.round');
$('.btn').on('click', () => Circle('.round'));
#circleBar {
margin-top: 50px;
text-align: center;
font-family: tahoma;
}
#circleBar .round {
min-height: 255px;
margin-top: 30px;
position: relative;
margin-bottom: 20px;
}
#circleBar .round strong {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
transform: translate(-50%);
font-size: 40px;
color: #212121;
font-weight: 100;
}
#circleBar span {
display: block;
color: #999;
font-size: 17px;
margin-top: 10px;
}
#circleBar span i {
color: #104723;
font-size: 22px;
margin-right: 7px;
}
section button:active {
background-color: #104723;
border-color: #b3ab7d;
}
section button:hover {
background-color: #104723;
border-color: #b3ab7d;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/site.css">
<section id="circleBar">
<h1>Morning Report Tracker</h1>
<p>By Location</p>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="round" data-value="0.87" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Kuwait</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.74" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Albania</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.44" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Australia</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.15" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Guam</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="round" data-value="0.77" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Thailand</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.74" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Syria</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.54" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Japan</span>
</div>
</div>
</div>
</div>
<button class="btn">Load Attendance</button>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js" integrity="sha512-6kvhZ/39gRVLmoM/6JxbbJVTYzL/gnbDVsHACLx/31IREU4l3sI7yeO0d4gw8xU5Mpmm/17LMaDHOCf+TvuC2Q==" crossorigin="anonymous"></script>
-----------------------
function Circle(selector) {
$(selector).each((i, el) => {
let $el = $(el);
let value = $el.data('value');
$el.circleProgress({
fill: { color: value < 0.5 ? 'red' : value < 0.75 ? 'yellow' : 'green' }
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text((stepValue * 100).toFixed(0) + '%');
});
});
};
Circle('.round');
$('.btn').on('click', () => Circle('.round'));
#circleBar {
margin-top: 50px;
text-align: center;
font-family: tahoma;
}
#circleBar .round {
min-height: 255px;
margin-top: 30px;
position: relative;
margin-bottom: 20px;
}
#circleBar .round strong {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
transform: translate(-50%);
font-size: 40px;
color: #212121;
font-weight: 100;
}
#circleBar span {
display: block;
color: #999;
font-size: 17px;
margin-top: 10px;
}
#circleBar span i {
color: #104723;
font-size: 22px;
margin-right: 7px;
}
section button:active {
background-color: #104723;
border-color: #b3ab7d;
}
section button:hover {
background-color: #104723;
border-color: #b3ab7d;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/site.css">
<section id="circleBar">
<h1>Morning Report Tracker</h1>
<p>By Location</p>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="round" data-value="0.87" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Kuwait</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.74" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Albania</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.44" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Australia</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.15" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Guam</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="round" data-value="0.77" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Thailand</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.74" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Syria</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.54" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Japan</span>
</div>
</div>
</div>
</div>
<button class="btn">Load Attendance</button>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js" integrity="sha512-6kvhZ/39gRVLmoM/6JxbbJVTYzL/gnbDVsHACLx/31IREU4l3sI7yeO0d4gw8xU5Mpmm/17LMaDHOCf+TvuC2Q==" crossorigin="anonymous"></script>
[Vue warn]: Error in mounted hook: "TypeError: element.circleProgress is not a function"
<!-- load jquery for the first time: -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- register plugin circle-progress -->
<script src="dist/circle-progress.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.0.0-beta.14"></script>
<script src="https://vuejs.org/js/vue.min.js"></script>
<!-- Load jquery a second time? -->
<script src="/dash/js/jquery.min.js" type="text/javascript"></script>
CSS / jQuery: Dynamically updated text appears right of instead of inside circular progress bar
/* Examples */
(function($) {
/*
* Example 1:
*
* - no animation
* - custom gradient
*
* By the way - you may specify more than 2 colors for the gradient
*/
$('.first.circle').circleProgress({
value: 0.35,
animation: false,
fill: {gradient: ['#ff1e41', '#ff5f43']}
});
/*
* Example 2:
*
* - default gradient
* - listening to `circle-animation-progress` event and display the animation progress: from 0 to 100%
*/
$('.second.circle').circleProgress({
value: 0.6
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html(Math.round(100 * progress) + '<i>%</i>');
});
/*
* Example 3:
*
* - very custom gradient
* - listening to `circle-animation-progress` event and display the dynamic change of the value: from 0 to 0.8
*/
$('.third.circle').circleProgress({
value: 0.75,
fill: {gradient: [['#0681c4', .5], ['#4ac5f8', .5]], gradientAngle: Math.PI / 4}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text(stepValue.toFixed(2).substr(1));
});
/*
* Example 4:
*
* - solid color fill
* - custom start angle
* - custom line cap
* - dynamic value set
*/
var c4 = $('.forth.circle');
c4.circleProgress({
startAngle: -Math.PI / 4 * 3,
value: 0.5,
lineCap: 'round',
fill: {color: '#ffa500'}
});
// Let's emulate dynamic value update
setTimeout(function() { c4.circleProgress('value', 0.7); }, 1000);
setTimeout(function() { c4.circleProgress('value', 1.0); }, 1100);
setTimeout(function() { c4.circleProgress('value', 0.5); }, 2100);
/*
* Example 5:
*
* - image fill; image should be squared; it will be stretched to SxS size, where S - size of the widget
* - fallback color fill (when image is not loaded)
* - custom widget size (default is 100px)
* - custom circle thickness (default is 1/14 of the size)
* - reverse drawing mode
* - custom animation start value
* - usage of "data-" attributes
*/
$('.fifth.circle').circleProgress({
value: 0.7
// all other config options were taken from "data-" attributes
// options passed in config object have higher priority than "data-" attributes
// "data-" attributes are taken into account only on init (not on update/redraw)
// "data-fill" (and other object options) should be in valid JSON format
});
})(jQuery);
body {
background-color: #444;
padding-top: 40px;
font: 15px/1.3 Arial, sans-serif;
color: #fff;
text-align: center;
}
a {
color: orange;
}
.new-tab-link {
padding-right: 14px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3ggXDSIzCeRHfQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAA9SURBVBjTY2RAA/+XMvxHF2NkwAOwacCq4P9Shv8suFQzRiNsYUEXwKoJ2VhkNrIaJgYiAAs2N2BVRMirAD6JHi10MCdVAAAAAElFTkSuQmCC) no-repeat right center;
}
.page-title {
font: 400 40px/1.5 Open Sans, sans-serif;
text-align: center;
}
.circles {
margin-bottom: -10px;
}
.circle {
width: 100px;
margin: 6px 6px 20px;
display: inline-block;
position: relative;
text-align: center;
line-height: 1.2;
}
.circle canvas {
vertical-align: top;
}
.circle strong {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 30px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
p {
margin: 40px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.2/dist/circle-progress.js"></script>
<div class="circles">
<div class="first circle">
<span>no <br> animation</span>
</div>
<div class="second circle">
<strong></strong>
<span>animation <br> progress</span>
</div>
<div class="third circle">
<strong></strong>
<span>value <br> progress</span>
</div>
<div class="forth circle">
<span>custom angle, <br> value update</span>
</div>
<div
class="fifth circle"
data-value="0.9"
data-size="60"
data-thickness="20"
data-animation-start-value="1.0"
data-fill="{
"color": "rgba(0, 0, 0, .3)",
"image": "http://i.imgur.com/pT0i89v.png"
}"
data-reverse="true"
>
<span>image fill, <br> custom sizes</span>
</div>
</div>
-----------------------
/* Examples */
(function($) {
/*
* Example 1:
*
* - no animation
* - custom gradient
*
* By the way - you may specify more than 2 colors for the gradient
*/
$('.first.circle').circleProgress({
value: 0.35,
animation: false,
fill: {gradient: ['#ff1e41', '#ff5f43']}
});
/*
* Example 2:
*
* - default gradient
* - listening to `circle-animation-progress` event and display the animation progress: from 0 to 100%
*/
$('.second.circle').circleProgress({
value: 0.6
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html(Math.round(100 * progress) + '<i>%</i>');
});
/*
* Example 3:
*
* - very custom gradient
* - listening to `circle-animation-progress` event and display the dynamic change of the value: from 0 to 0.8
*/
$('.third.circle').circleProgress({
value: 0.75,
fill: {gradient: [['#0681c4', .5], ['#4ac5f8', .5]], gradientAngle: Math.PI / 4}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text(stepValue.toFixed(2).substr(1));
});
/*
* Example 4:
*
* - solid color fill
* - custom start angle
* - custom line cap
* - dynamic value set
*/
var c4 = $('.forth.circle');
c4.circleProgress({
startAngle: -Math.PI / 4 * 3,
value: 0.5,
lineCap: 'round',
fill: {color: '#ffa500'}
});
// Let's emulate dynamic value update
setTimeout(function() { c4.circleProgress('value', 0.7); }, 1000);
setTimeout(function() { c4.circleProgress('value', 1.0); }, 1100);
setTimeout(function() { c4.circleProgress('value', 0.5); }, 2100);
/*
* Example 5:
*
* - image fill; image should be squared; it will be stretched to SxS size, where S - size of the widget
* - fallback color fill (when image is not loaded)
* - custom widget size (default is 100px)
* - custom circle thickness (default is 1/14 of the size)
* - reverse drawing mode
* - custom animation start value
* - usage of "data-" attributes
*/
$('.fifth.circle').circleProgress({
value: 0.7
// all other config options were taken from "data-" attributes
// options passed in config object have higher priority than "data-" attributes
// "data-" attributes are taken into account only on init (not on update/redraw)
// "data-fill" (and other object options) should be in valid JSON format
});
})(jQuery);
body {
background-color: #444;
padding-top: 40px;
font: 15px/1.3 Arial, sans-serif;
color: #fff;
text-align: center;
}
a {
color: orange;
}
.new-tab-link {
padding-right: 14px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3ggXDSIzCeRHfQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAA9SURBVBjTY2RAA/+XMvxHF2NkwAOwacCq4P9Shv8suFQzRiNsYUEXwKoJ2VhkNrIaJgYiAAs2N2BVRMirAD6JHi10MCdVAAAAAElFTkSuQmCC) no-repeat right center;
}
.page-title {
font: 400 40px/1.5 Open Sans, sans-serif;
text-align: center;
}
.circles {
margin-bottom: -10px;
}
.circle {
width: 100px;
margin: 6px 6px 20px;
display: inline-block;
position: relative;
text-align: center;
line-height: 1.2;
}
.circle canvas {
vertical-align: top;
}
.circle strong {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 30px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
p {
margin: 40px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.2/dist/circle-progress.js"></script>
<div class="circles">
<div class="first circle">
<span>no <br> animation</span>
</div>
<div class="second circle">
<strong></strong>
<span>animation <br> progress</span>
</div>
<div class="third circle">
<strong></strong>
<span>value <br> progress</span>
</div>
<div class="forth circle">
<span>custom angle, <br> value update</span>
</div>
<div
class="fifth circle"
data-value="0.9"
data-size="60"
data-thickness="20"
data-animation-start-value="1.0"
data-fill="{
"color": "rgba(0, 0, 0, .3)",
"image": "http://i.imgur.com/pT0i89v.png"
}"
data-reverse="true"
>
<span>image fill, <br> custom sizes</span>
</div>
</div>
-----------------------
/* Examples */
(function($) {
/*
* Example 1:
*
* - no animation
* - custom gradient
*
* By the way - you may specify more than 2 colors for the gradient
*/
$('.first.circle').circleProgress({
value: 0.35,
animation: false,
fill: {gradient: ['#ff1e41', '#ff5f43']}
});
/*
* Example 2:
*
* - default gradient
* - listening to `circle-animation-progress` event and display the animation progress: from 0 to 100%
*/
$('.second.circle').circleProgress({
value: 0.6
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html(Math.round(100 * progress) + '<i>%</i>');
});
/*
* Example 3:
*
* - very custom gradient
* - listening to `circle-animation-progress` event and display the dynamic change of the value: from 0 to 0.8
*/
$('.third.circle').circleProgress({
value: 0.75,
fill: {gradient: [['#0681c4', .5], ['#4ac5f8', .5]], gradientAngle: Math.PI / 4}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text(stepValue.toFixed(2).substr(1));
});
/*
* Example 4:
*
* - solid color fill
* - custom start angle
* - custom line cap
* - dynamic value set
*/
var c4 = $('.forth.circle');
c4.circleProgress({
startAngle: -Math.PI / 4 * 3,
value: 0.5,
lineCap: 'round',
fill: {color: '#ffa500'}
});
// Let's emulate dynamic value update
setTimeout(function() { c4.circleProgress('value', 0.7); }, 1000);
setTimeout(function() { c4.circleProgress('value', 1.0); }, 1100);
setTimeout(function() { c4.circleProgress('value', 0.5); }, 2100);
/*
* Example 5:
*
* - image fill; image should be squared; it will be stretched to SxS size, where S - size of the widget
* - fallback color fill (when image is not loaded)
* - custom widget size (default is 100px)
* - custom circle thickness (default is 1/14 of the size)
* - reverse drawing mode
* - custom animation start value
* - usage of "data-" attributes
*/
$('.fifth.circle').circleProgress({
value: 0.7
// all other config options were taken from "data-" attributes
// options passed in config object have higher priority than "data-" attributes
// "data-" attributes are taken into account only on init (not on update/redraw)
// "data-fill" (and other object options) should be in valid JSON format
});
})(jQuery);
body {
background-color: #444;
padding-top: 40px;
font: 15px/1.3 Arial, sans-serif;
color: #fff;
text-align: center;
}
a {
color: orange;
}
.new-tab-link {
padding-right: 14px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3ggXDSIzCeRHfQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAA9SURBVBjTY2RAA/+XMvxHF2NkwAOwacCq4P9Shv8suFQzRiNsYUEXwKoJ2VhkNrIaJgYiAAs2N2BVRMirAD6JHi10MCdVAAAAAElFTkSuQmCC) no-repeat right center;
}
.page-title {
font: 400 40px/1.5 Open Sans, sans-serif;
text-align: center;
}
.circles {
margin-bottom: -10px;
}
.circle {
width: 100px;
margin: 6px 6px 20px;
display: inline-block;
position: relative;
text-align: center;
line-height: 1.2;
}
.circle canvas {
vertical-align: top;
}
.circle strong {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 30px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
p {
margin: 40px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.2/dist/circle-progress.js"></script>
<div class="circles">
<div class="first circle">
<span>no <br> animation</span>
</div>
<div class="second circle">
<strong></strong>
<span>animation <br> progress</span>
</div>
<div class="third circle">
<strong></strong>
<span>value <br> progress</span>
</div>
<div class="forth circle">
<span>custom angle, <br> value update</span>
</div>
<div
class="fifth circle"
data-value="0.9"
data-size="60"
data-thickness="20"
data-animation-start-value="1.0"
data-fill="{
"color": "rgba(0, 0, 0, .3)",
"image": "http://i.imgur.com/pT0i89v.png"
}"
data-reverse="true"
>
<span>image fill, <br> custom sizes</span>
</div>
</div>
-----------------------
<div class="first_circle">
<div class="first circle">
$(document).ready(function() {
$('.first.circle').circleProgress({
value: 0.35,
animation: false,
fill: {
gradient: ['#ff1e41', '#ff5f43']
}
});
$('.second.circle').circleProgress({
value: 0.6
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html(parseInt(100 * progress) + '<i>%</i>');
});
$('.third.circle').circleProgress({
value: 0.8,
fill: {
gradient: ['#0681c4', '#07c6c1']
}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
});
$('.forth.circle').circleProgress({
startAngle: -Math.PI / 4 * 3,
value: .5,
fill: {
color: '#ffa500'
}
});
$('.fifth.circle').circleProgress({
value: 1,
size: 60,
thickness: 20,
fill: {
color: 'lime'
}
});
});
.circle {
width: 100px;
margin: 6px 6px 20px;
display: inline-block;
position: relative;
text-align: center;
line-height: 1.2;
}
.circle canvas {
vertical-align: top;
}
.circle strong {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 30px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/dist/circle-progress.js"></script>
<div class="circles">
<div class="first circle">
<span>no <br/> animation</span>
</div>
<div class="second circle">
<strong></strong>
<span>animation <br/> progress</span>
</div>
<div class="third circle">
<strong></strong>
<span>value <br/> progress</span>
</div>
<div class="forth circle">
<span>solid fill, <br/> custom angle</span>
</div>
<div class="fifth circle">
<span>image fill, <br/> custom sizes</span>
</div>
</div>
-----------------------
<div class="first_circle">
<div class="first circle">
$(document).ready(function() {
$('.first.circle').circleProgress({
value: 0.35,
animation: false,
fill: {
gradient: ['#ff1e41', '#ff5f43']
}
});
$('.second.circle').circleProgress({
value: 0.6
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html(parseInt(100 * progress) + '<i>%</i>');
});
$('.third.circle').circleProgress({
value: 0.8,
fill: {
gradient: ['#0681c4', '#07c6c1']
}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
});
$('.forth.circle').circleProgress({
startAngle: -Math.PI / 4 * 3,
value: .5,
fill: {
color: '#ffa500'
}
});
$('.fifth.circle').circleProgress({
value: 1,
size: 60,
thickness: 20,
fill: {
color: 'lime'
}
});
});
.circle {
width: 100px;
margin: 6px 6px 20px;
display: inline-block;
position: relative;
text-align: center;
line-height: 1.2;
}
.circle canvas {
vertical-align: top;
}
.circle strong {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 30px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/dist/circle-progress.js"></script>
<div class="circles">
<div class="first circle">
<span>no <br/> animation</span>
</div>
<div class="second circle">
<strong></strong>
<span>animation <br/> progress</span>
</div>
<div class="third circle">
<strong></strong>
<span>value <br/> progress</span>
</div>
<div class="forth circle">
<span>solid fill, <br/> custom angle</span>
</div>
<div class="fifth circle">
<span>image fill, <br/> custom sizes</span>
</div>
</div>
-----------------------
<div class="first_circle">
<div class="first circle">
$(document).ready(function() {
$('.first.circle').circleProgress({
value: 0.35,
animation: false,
fill: {
gradient: ['#ff1e41', '#ff5f43']
}
});
$('.second.circle').circleProgress({
value: 0.6
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html(parseInt(100 * progress) + '<i>%</i>');
});
$('.third.circle').circleProgress({
value: 0.8,
fill: {
gradient: ['#0681c4', '#07c6c1']
}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
});
$('.forth.circle').circleProgress({
startAngle: -Math.PI / 4 * 3,
value: .5,
fill: {
color: '#ffa500'
}
});
$('.fifth.circle').circleProgress({
value: 1,
size: 60,
thickness: 20,
fill: {
color: 'lime'
}
});
});
.circle {
width: 100px;
margin: 6px 6px 20px;
display: inline-block;
position: relative;
text-align: center;
line-height: 1.2;
}
.circle canvas {
vertical-align: top;
}
.circle strong {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 30px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/dist/circle-progress.js"></script>
<div class="circles">
<div class="first circle">
<span>no <br/> animation</span>
</div>
<div class="second circle">
<strong></strong>
<span>animation <br/> progress</span>
</div>
<div class="third circle">
<strong></strong>
<span>value <br/> progress</span>
</div>
<div class="forth circle">
<span>solid fill, <br/> custom angle</span>
</div>
<div class="fifth circle">
<span>image fill, <br/> custom sizes</span>
</div>
</div>
-----------------------
<div class="first_circle">
<div class="first circle">
$(document).ready(function() {
$('.first.circle').circleProgress({
value: 0.35,
animation: false,
fill: {
gradient: ['#ff1e41', '#ff5f43']
}
});
$('.second.circle').circleProgress({
value: 0.6
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html(parseInt(100 * progress) + '<i>%</i>');
});
$('.third.circle').circleProgress({
value: 0.8,
fill: {
gradient: ['#0681c4', '#07c6c1']
}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
});
$('.forth.circle').circleProgress({
startAngle: -Math.PI / 4 * 3,
value: .5,
fill: {
color: '#ffa500'
}
});
$('.fifth.circle').circleProgress({
value: 1,
size: 60,
thickness: 20,
fill: {
color: 'lime'
}
});
});
.circle {
width: 100px;
margin: 6px 6px 20px;
display: inline-block;
position: relative;
text-align: center;
line-height: 1.2;
}
.circle canvas {
vertical-align: top;
}
.circle strong {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 30px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/dist/circle-progress.js"></script>
<div class="circles">
<div class="first circle">
<span>no <br/> animation</span>
</div>
<div class="second circle">
<strong></strong>
<span>animation <br/> progress</span>
</div>
<div class="third circle">
<strong></strong>
<span>value <br/> progress</span>
</div>
<div class="forth circle">
<span>solid fill, <br/> custom angle</span>
</div>
<div class="fifth circle">
<span>image fill, <br/> custom sizes</span>
</div>
</div>
-----------------------
<div class="first_circle">
<div class="first circle">
$(document).ready(function() {
$('.first.circle').circleProgress({
value: 0.35,
animation: false,
fill: {
gradient: ['#ff1e41', '#ff5f43']
}
});
$('.second.circle').circleProgress({
value: 0.6
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html(parseInt(100 * progress) + '<i>%</i>');
});
$('.third.circle').circleProgress({
value: 0.8,
fill: {
gradient: ['#0681c4', '#07c6c1']
}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
});
$('.forth.circle').circleProgress({
startAngle: -Math.PI / 4 * 3,
value: .5,
fill: {
color: '#ffa500'
}
});
$('.fifth.circle').circleProgress({
value: 1,
size: 60,
thickness: 20,
fill: {
color: 'lime'
}
});
});
.circle {
width: 100px;
margin: 6px 6px 20px;
display: inline-block;
position: relative;
text-align: center;
line-height: 1.2;
}
.circle canvas {
vertical-align: top;
}
.circle strong {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 30px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/dist/circle-progress.js"></script>
<div class="circles">
<div class="first circle">
<span>no <br/> animation</span>
</div>
<div class="second circle">
<strong></strong>
<span>animation <br/> progress</span>
</div>
<div class="third circle">
<strong></strong>
<span>value <br/> progress</span>
</div>
<div class="forth circle">
<span>solid fill, <br/> custom angle</span>
</div>
<div class="fifth circle">
<span>image fill, <br/> custom sizes</span>
</div>
</div>
How to change a @Binding var from another class?
class Simulator: ObservableObject {
@Published var progress: CGFloat = .zero // << and here
DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
self.simulator.setName(name: "Big Simulator")
self.simulator.setVersion(version: "2")
self.simulator.progress = 0.3 // << modifier here or anywhere
}
VStack(alignment: .center) {
Text("State")
.frame(maxWidth: .infinity, maxHeight: .infinity)
// observe here
CircularProgressBar(circleProgress: self.$simulator.progress, widthAndHeight: 180, labelSize: 30, progressColor: .blue)
-----------------------
class Simulator: ObservableObject {
@Published var progress: CGFloat = .zero // << and here
DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
self.simulator.setName(name: "Big Simulator")
self.simulator.setVersion(version: "2")
self.simulator.progress = 0.3 // << modifier here or anywhere
}
VStack(alignment: .center) {
Text("State")
.frame(maxWidth: .infinity, maxHeight: .infinity)
// observe here
CircularProgressBar(circleProgress: self.$simulator.progress, widthAndHeight: 180, labelSize: 30, progressColor: .blue)
-----------------------
class Simulator: ObservableObject {
@Published var progress: CGFloat = .zero // << and here
DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
self.simulator.setName(name: "Big Simulator")
self.simulator.setVersion(version: "2")
self.simulator.progress = 0.3 // << modifier here or anywhere
}
VStack(alignment: .center) {
Text("State")
.frame(maxWidth: .infinity, maxHeight: .infinity)
// observe here
CircularProgressBar(circleProgress: self.$simulator.progress, widthAndHeight: 180, labelSize: 30, progressColor: .blue)
How to change size of the circles if the screen size changed?
document.addEventListener("resize", handleResize);
-----------------------
@media only screen and (max-width: 600px) {
.circle {
width: 50%;
}
}
-----------------------
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 4,
lincCape: 'round',
emptyFill: '#d4d4d4',
fill: {
color: '#1F88E9'
},
size: $(this).width() / 2
})
$(this).data("animate", false); // added this!
}
})
}
$(function() {
// Show animated elements
$(window).on("resize scroll", animateElements);
});
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
-----------------------
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 4,
lincCape: 'round',
emptyFill: '#d4d4d4',
fill: {
color: '#1F88E9'
},
size: $(this).width() / 2
})
$(this).data("animate", false); // added this!
}
})
}
$(function() {
// Show animated elements
$(window).on("resize scroll", animateElements);
});
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
-----------------------
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
function myFunction(x) {
let size = 150;
if (x.matches) {
// If media query matches
size = 80;
}
function animateElements() {
$(".progressbar").each(function () {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find(".circle").attr("data-percent");
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data("animate");
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data("animate", true);
$(this)
.find(".circle")
.circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 4,
lincCape: "round",
emptyFill: "#d4d4d4",
fill: {
color: "#1F88E9",
},
size: size,
});
$(this).data("animate", false);
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
}
var x = window.matchMedia("(max-width: 700px)");
myFunction(x);
$(window).on("resize", function (e) {
var x = window.matchMedia("(max-width: 700px)");
myFunction(x); // Call listener function at run time
});
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 100px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
-----------------------
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
function myFunction(x) {
let size = 150;
if (x.matches) {
// If media query matches
size = 80;
}
function animateElements() {
$(".progressbar").each(function () {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find(".circle").attr("data-percent");
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data("animate");
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data("animate", true);
$(this)
.find(".circle")
.circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 4,
lincCape: "round",
emptyFill: "#d4d4d4",
fill: {
color: "#1F88E9",
},
size: size,
});
$(this).data("animate", false);
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
}
var x = window.matchMedia("(max-width: 700px)");
myFunction(x);
$(window).on("resize", function (e) {
var x = window.matchMedia("(max-width: 700px)");
myFunction(x); // Call listener function at run time
});
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 100px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
-----------------------
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
function myFunction(x) {
let size = 150;
if (x.matches) {
// If media query matches
size = 80;
}
function animateElements() {
$(".progressbar").each(function () {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find(".circle").attr("data-percent");
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data("animate");
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data("animate", true);
$(this)
.find(".circle")
.circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 4,
lincCape: "round",
emptyFill: "#d4d4d4",
fill: {
color: "#1F88E9",
},
size: size,
});
$(this).data("animate", false);
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
}
var x = window.matchMedia("(max-width: 700px)");
myFunction(x);
$(window).on("resize", function (e) {
var x = window.matchMedia("(max-width: 700px)");
myFunction(x); // Call listener function at run time
});
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 100px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
How Can I Change size of the circles?
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300 // <-- here, the size changes the circle radius
})
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
console.log("JavaScript is amazing!");
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('div').text((stepValue * 100).toFixed(1) + "%");
}).stop();
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
-----------------------
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300 // <-- here, the size changes the circle radius
})
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
console.log("JavaScript is amazing!");
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('div').text((stepValue * 100).toFixed(1) + "%");
}).stop();
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
-----------------------
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300 // <-- here, the size changes the circle radius
})
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
console.log("JavaScript is amazing!");
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('div').text((stepValue * 100).toFixed(1) + "%");
}).stop();
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
-----------------------
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300 // <-- here, the size changes the circle radius
})
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
console.log("JavaScript is amazing!");
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('div').text((stepValue * 100).toFixed(1) + "%");
}).stop();
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
-----------------------
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300 // <-- here, the size changes the circle radius
})
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
console.log("JavaScript is amazing!");
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('div').text((stepValue * 100).toFixed(1) + "%");
}).stop();
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
getOr, put() and edit() can not resolve in org.androidannotations:androidannotations
defaultConfig {
minSdkVersion 21
targetSdkVersion 29
// If you have different applicationIds for buildTypes or productFlavors uncomment this block.
javaCompileOptions {
annotationProcessorOptions {
arguments = ["resourcePackageName": android.defaultConfig.applicationId]
}
}
}
QUESTION
Why Android Studio uses Java classes instead of Kotlin
Asked 2022-Jan-09 at 13:49I am new to kotlin. So I created a kotlin project in Android Studio and imported Fragment-ktx and Activity-ktx dependencies. So in a Fragment when I right click on the fragment and then Go To->Implementations it just opens the Fragment.java file. When using the Fragment-ktx dependency is this normal? Any help would be great.
Here's my app.gradle file
android {
compileSdkVersion 31
defaultConfig {
applicationId "com.xxxxxxx.xxxxxxxxxx"
minSdk 23
targetSdk 31
versionCode 117
versionName "3.2.11"
vectorDrawables.generatedDensities = []
}
buildTypes {
release {
minifyEnabled true
shrinkResources true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
packagingOptions {
exclude 'META-INF/proguard/androidx-annotations.pro'
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
}
buildFeatures {
viewBinding true
}
}
dependencies {
implementation fileTree(include: ['*.jar', '*.aar'], dir: 'libs')
implementation platform('com.google.firebase:firebase-bom:29.0.3')
implementation 'com.google.firebase:firebase-analytics-ktx'
implementation 'com.google.firebase:firebase-crashlytics-ktx'
implementation 'com.google.firebase:firebase-messaging-ktx'
implementation "androidx.core:core-ktx:1.7.0"
implementation "androidx.activity:activity-ktx:1.4.0"
implementation "androidx.fragment:fragment-ktx:1.4.0"
implementation "androidx.collection:collection-ktx:1.2.0"
implementation 'androidx.appcompat:appcompat:1.4.0'
implementation 'com.google.android.material:material:1.4.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.2'
implementation 'androidx.recyclerview:recyclerview:1.2.1'
implementation "androidx.preference:preference-ktx:1.1.1"
implementation "androidx.biometric:biometric-ktx:1.2.0-alpha04"
implementation 'androidx.work:work-runtime-ktx:2.7.1'
implementation 'com.android.billingclient:billing:4.0.0'
implementation 'com.android.volley:volley:1.2.1'
implementation 'com.google.android.gms:play-services-ads:20.5.0'
implementation 'com.google.android.play:core-ktx:1.8.1'
implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.5.0'
implementation 'com.github.lzyzsd:circleprogress:1.2.1'
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
implementation 'com.nabinbhandari.android:permissions:3.8'
implementation 'com.nex3z:toggle-button-group:1.2.3'
implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
implementation "io.github.iamthevoid.batteryview:batteryview:0.6.1"
}
ANSWER
Answered 2022-Jan-09 at 13:49There's nothing to be surprised about. Entire native SDK and most of jetpack libraries are pure java.
fragment-ktx
just contains a bunch of extensions for fragment manager and viewmodels on top of inheriting androidx.fragment
package.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
No vulnerabilities reported
Save this library and start creating your kit
Save this library and start creating your kit