I have made an example countdown using svg but i need a clock face which would be just a dark circle which is being filled with the colour of the countdown which i made.
Here is the code i got:
var time = 1800;
var initialOffset = '440';
var i = 1
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
var interval = setInterval(function() {
$('h3').text(secondsToTime(1800-i).m.toString()+" min " +secondsToTime(1800-i).s.toString()+" sek");
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
function secondsToTime(secs)
{
var hours = Math.floor(secs / (60 * 60));
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
var obj = {
"m": minutes,
"s": seconds
};
return obj;
}
.item {
position: relative;
float: left;
}
.item h3 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item html">
<h3>0</h3>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="15" stroke="blue" fill="none"/>
</g>
</svg>
</div>
This is the result i am looking for (dark clock face) and countdown filling it out:
One of my tries to accomplish what i want was adding a new css class named "circle" but it does not seem to show up when i add it to <circle id="circle" class="circle circle_animation" r="69.85699" cy="81" cx="81" stroke-width="15" stroke="blue" fill="none"/>.
var time = 1800;
var initialOffset = '440';
var i = 1
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
var interval = setInterval(function() {
$('h3').text(secondsToTime(1800-i).m.toString()+" min " +secondsToTime(1800-i).s.toString()+" sek");
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
function secondsToTime(secs)
{
var hours = Math.floor(secs / (60 * 60));
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
var obj = {
"m": minutes,
"s": seconds
};
return obj;
}
.item {
position: relative;
float: left;
}
.item h3 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle {
border: 15px solid #03002e;
height: 125px;
border-radius:50%;
width: 125px;
}
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item html">
<h3>30 min 00 sek</h3>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle circle_animation" r="69.85699" cy="81" cx="81" stroke-width="15" stroke="blue" fill="none"/>
</g>
</svg>
</div>
Just add another circle to your svg area before the current circle and make sure it doesn't have the same class the one you are animating. <circle id="circle" r="69.85699" cy="81" cx="81" stroke-width="15" stroke="#1F2837" fill="none"/>
You can see a demo on jsbin
Related
I want to integrate a countdown timer on specific slides in my reveal.js deck.
To achieve this, I used code from this codepen example and integrated this into my slideshow. It works nicely for the first instance of the timer, but does not appear when I try to add the timer to a second slide.
// the js code for the timer (source: https://codepen.io/geoffgraham/pen/yLywVbW)
// Credit: Mateusz Rybczonec
const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 10;
const ALERT_THRESHOLD = 5;
const COLOR_CODES = {
info: {
color: "green"
},
warning: {
color: "orange",
threshold: WARNING_THRESHOLD
},
alert: {
color: "red",
threshold: ALERT_THRESHOLD
}
};
const TIME_LIMIT = 20;
let timePassed = 0;
let timeLeft = TIME_LIMIT;
let timerInterval = null;
let remainingPathColor = COLOR_CODES.info.color;
document.getElementById("app").innerHTML = `
<div class="base-timer">
<svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g class="base-timer__circle">
<circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
<path
id="base-timer-path-remaining"
stroke-dasharray="283"
class="base-timer__path-remaining ${remainingPathColor}"
d="
M 50, 50
m -45, 0
a 45,45 0 1,0 90,0
a 45,45 0 1,0 -90,0
"
></path>
</g>
</svg>
<span id="base-timer-label" class="base-timer__label">${formatTime(
timeLeft
)}</span>
</div>
`;
startTimer();
function onTimesUp() {
clearInterval(timerInterval);
}
function startTimer() {
timerInterval = setInterval(() => {
timePassed = timePassed += 1;
timeLeft = TIME_LIMIT - timePassed;
document.getElementById("base-timer-label").innerHTML = formatTime(
timeLeft
);
setCircleDasharray();
setRemainingPathColor(timeLeft);
if (timeLeft === 0) {
onTimesUp();
}
}, 1000);
}
function formatTime(time) {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
if (seconds < 10) {
seconds = `0${seconds}`;
}
return `${minutes}:${seconds}`;
}
function setRemainingPathColor(timeLeft) {
const {
alert,
warning,
info
} = COLOR_CODES;
if (timeLeft <= alert.threshold) {
document
.getElementById("base-timer-path-remaining")
.classList.remove(warning.color);
document
.getElementById("base-timer-path-remaining")
.classList.add(alert.color);
} else if (timeLeft <= warning.threshold) {
document
.getElementById("base-timer-path-remaining")
.classList.remove(info.color);
document
.getElementById("base-timer-path-remaining")
.classList.add(warning.color);
}
}
function calculateTimeFraction() {
const rawTimeFraction = timeLeft / TIME_LIMIT;
return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
}
function setCircleDasharray() {
const circleDasharray = `${(
calculateTimeFraction() * FULL_DASH_ARRAY
).toFixed(0)} 283`;
document
.getElementById("base-timer-path-remaining")
.setAttribute("stroke-dasharray", circleDasharray);
}
// this code is to initialize the slideshow
Reveal.initialize({
hash: true,
});
/* all css is for the timer*/
body {
font-family: sans-serif;
display: grid;
height: 100vh;
place-items: center;
}
.base-timer {
position: relative;
width: 300px;
height: 300px;
}
.base-timer__svg {
transform: scaleX(-1);
}
.base-timer__circle {
fill: none;
stroke: none;
}
.base-timer__path-elapsed {
stroke-width: 7px;
stroke: grey;
}
.base-timer__path-remaining {
stroke-width: 7px;
stroke-linecap: round;
transform: rotate(90deg);
transform-origin: center;
transition: 1s linear all;
fill-rule: nonzero;
stroke: currentColor;
}
.base-timer__path-remaining.green {
color: rgb(65, 184, 131);
}
.base-timer__path-remaining.orange {
color: orange;
}
.base-timer__path-remaining.red {
color: red;
}
.base-timer__label {
position: absolute;
width: 300px;
height: 300px;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css" rel="stylesheet" />
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>reveal.js</title>
<link rel="stylesheet" href="plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>the timer appears here<br>
<div id="app"></div>
</section>
<section>but does not appear here<br>
<div id="app"></div>
</section>
</div>
</div>
</body>
</html>
I'm not very versed with Javascript.. can anybody tell me what I can do to get the second instance of the timer working?
The reveal-countdown plugin already provides this feature, no need to build it on your own! You can install it by downloading the repo and adding it to plugins/countdown or via npm
I am trying to style a circle showing the progress percent as the circumference. I want to get the radius in JS but style the circle in CSS.
The function I use to do this is setPercent. It reads the radius of the circle by selecting the radius element and getting the radius measures from there.
This is the code that works:
const fn = function() {
let circle = document.querySelector('circle.percent')
debugger
let radius = circle.r.baseVal.value
let circumference = 2 * Math.PI * radius
circle.style.strokeDasharray = `${circumference} ${circumference}`
this.setPercent = function(percent) {
circle.style.strokeDashoffset = (100 - percent) / 100 * circumference
}
}
setTimeout(fn, 1)
:root {
--back-ground: #30384a;
--neutral-circle-border: #656c79;
--completed-color: #67ed8b;
background: var(--back-ground)
}
div.normal_square {
width: 100px;
height: 100px;
}
svg.progress-ring {
margin: 0 auto;
display: block;
}
svg.progress-ring circle {
fill: transparent;
stroke-width: 2;
stroke: black;
cx: 50%;
cy: 50%;
r: 40%;
}
svg.progress-ring circle.percent {
transition: all 0.5s ease-out;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
svg.progress-ring circle.background {
stroke: var(--neutral-circle-border)
}
<div margin="0 auto">
<svg class="progress-ring" width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
<circle class="background"/>
<circle class="percent" fill="transparent" stroke-width="6" stroke="black" cx="50%" cy="50%" r="40%" />
</svg>
</div>
However, when I remove that r="40%" from my code, I can't get the radius measured from circle.r.... Why does it happen and how can I fix it?
Use window.getComputedStyle(element) to retrieve the value instead.
Currently you're retrieving the property value from the element reference, when you remove the property there's nothing left to retrieve.
Just ran into the same problem. This worked:
let radius = circle.getBoundingClientRect().width / 2;
Seems silly to have to do this though. Hopefully someone posts a better way.
I need to increase circle height and width to double. But it's not working. Please suggest me where I put the error in the code. I have no idea about the value of r. Please help me to update the value of r.
Here is my sample code.
var time = 10;
var initialOffset = '440';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
$('.circle_animation').css(
'stroke-dashoffset',
initialOffset - (i * (initialOffset / time) * (r / 69.85699))
);
$('h2').text(i);
if (i == time) {
clearInterval(interval);
}
i++;
}, 1000);
.item {
position: relative;
float: left;
}
.item h2 {
text-align: center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440;
/* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
<h2>0</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>
As you guessed, you have to change the value of r to change the radius.
If we look at the javascript code:
var r = $(".circle_animation").attr("r");
It means that r is the value of the html attribute r of the element with class name circle_animation.
If we then look at the html markup:
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
we see that r is set to 69.85699 on the circle with class name circle_animation
After that you have to remember that since your drawing a larger circle, you will also have to double both the size of the svg and the stroke-dasharray and stroke-dashoffset (these values are supposed to be 2*2*PI*r for this animation).
Here is your example with doubled radius as you requested:
var time = 10;
var initialOffset = '440';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
$('.circle_animation').css(
'stroke-dashoffset',
initialOffset-(i*(initialOffset/time)*(r/139.71398))
);
$('h2').text(i);
if (i == time) {
clearInterval(interval);
}
i++;
}, 1000);
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
margin-top: 60px;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 878; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 878;
transition: all 1s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
<h2>0</h2>
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="139.71398" cy="162" cx="162" stroke-width="8" stroke="#6fdb6f" fill="none"/>
your radius is 69.85699 on the circle. lets consider 70 for simplicity.
double will be 140, circumference of this circle would be 880
now your cx and cy should also consider the offset/width of the stroke.
so, 140 + (8/2)
most other calculations are simple as you have already done them.
var time = 10;
var initialOffset = '880';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
$('.circle_animation').css(
'stroke-dashoffset',
initialOffset-(i*(initialOffset/time)*(r/140))
);
$('h2').text(i);
if (i == time) {
clearInterval(interval);
}
i++;
}, 1000);
.item {
position: relative;
float: left;
}
.item h2 {
text-align: center;
position: absolute;
line-height: 265px;
width: 100%;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 880; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 880;
transition: all 1s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
<h2>0</h2>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="140" cy="144" cx="144" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>
You need this, Check this fiddle and code https://jsfiddle.net/rmcej7vk/
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
<h2>0</h2>
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="139.7139" cy="162" cx="162" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>
JS
var time = 10;
var initialOffset = '880';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
$('.circle_animation').css(
'stroke-dashoffset',
initialOffset - (i * (initialOffset / time) * (r / 139.7139))
);
$('h2').text(i);
if (i == time) {
clearInterval(interval);
}
i++;
}, 1000);
CSS
.item {
position: relative;
float: left;
}
.item h2 {
text-align: center;
position: absolute;
line-height: 250px;
width: 100%;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 880;
/* this value is the pixel circumference of the circle */
stroke-dashoffset: 880;
transition: all 1s linear;
}
Circle outline completes before timer finish. Although it is working fine when with the larger circle. fiddle
var time = 10;
var initialOffset = '440';
var i = 1
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
var interval = setInterval(function() {
$('h2').text(i);
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440;
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item html">
<h2>0</h2>
<svg width="70" height="70" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="25" cy="35" cx="35" stroke-width="4" stroke="#6fdb6f" fill="#ccc"/>
</g>
</svg>
</div>
You have to reduce the offset, both in css and javascript, i updated your code there :
http://jsfiddle.net/3recj0s9/
CSS :
.circle_animation {
stroke-dasharray: 155;
stroke-dashoffset: 155;
transition: all 1s linear;
}
JS
var initialOffset = '155';
I have an SVG with two circles that are animated using #keyframes. I want to display the value of the circle's growth. Using javascript I want to display the value as they shrink and grow. getTotalLength() is probably not what I should be using but am not sure of the name of what I am looking for that does size/value check.
My codepen
an example of how it would look
// console.log("DOM Ready!");
// // setInterval, changes global var, translates the size of the val.
// // ever second or two
// // point 0.1 means 10px
// // displaying each circle's value as they grow and shrink
// var redValue = document.getElementById('red-grow').innerHTML = span;
// // var greenValue = document.getElementById('green-grow').innerHTML =
// var redCircle = document.getElementsByClassName('red');
// var greenCircle = document.getElementsByClassName('green');
// var current = 0;
// var width = 0;
// var destination = 700;
// var friction = 0.04;
// // scaling up both circles
// function scaleUp() {
// // console.log(scaleUp);
// current += (destination - current) * friction;
// redCircle[0].style.width = (current * 0.5 + 'px');
// greenCircle[0].style.width = (current * 0.5 + 'px');
// if (current >= destination - 0.1) {
// // clearInterval(redAnimate);
// }
// }
// var redAnimate = setInterval(scaleUp, 20);
// // scaling down both circles
// function scaleDown() {
// //console.log(redCircle[0].style, greenCircle[0].style);
// current += (destination - current) * friction;
// redCircle[0].style.width = (current * 0.5 + 'px');
// greenCircle[0].style.width = (current * 0.5 + 'px');
// if (current >= destination - 0.1) {
// // clearInterval(greenAnimate);
// }
// }
// var greenAnimate = setInterval(scaleDown, 20);
body {
background-color: #584E56;
}
h1 {
color: #fff;
text-align: center;
margin: 10px 0;
font-family: 'Roboto', sans-serif;
font-weight: bold;
font-size: 2.4rem;
text-transform: uppercase;
letter-spacing: .3rems;
}
svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
}
.red, .green {
transform-origin: 60% 60%;
-webkit-animation: zoom 1s ease-in-out infinite alternate;
animation: zoom 1s ease-in-out infinite alternate;
}
#keyframes zoom {
from {
transform: scale(1, 1);
}
to {
transform: scale(0.7, 0.7);
}
}
.timeline {}
<h1>Animation SVG</h1>
<span class="" id="red-grow">
<!-- display here the red circle's value when growing and shrinking -->
Value:
</span>
<span class="" id="green-grow">
<!-- display here the green circle's value when growing and shrinking -->
Value:
</span>
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M-1-1h502v302H-1z"/>
<g>
<path class="timeline" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="4.5" stroke="#000" fill="none" d="M39.5 31.5v239M463.5 269.5l-422-1"/>
<ellipse class="red" id="inner" stroke="#e5a3a3" ry="65.5" rx="67" cy="165" cx="158.5" stroke-width="4.5" fill="none"/>
<ellipse class="green" stroke="#98FB98" ry="65.5" rx="67" cy="165" cx="361.5" stroke-width="4.5" fill="none"/>
</g>
</svg>
The current value of the animated transform property can be extracted using the getComputedStyle() method. That returns a matrix in string form which then need to extract the scale value from.
Here's an example solution that displays the current scale as a percentage.
var redCircle = document.getElementsByClassName('red')[0];
var greenCircle = document.getElementsByClassName('green')[0];
var redLabel = document.getElementById('red-grow');
var greenLabel = document.getElementById('green-grow');
function updateLabels()
{
var transformValue = getComputedStyle(redCircle).getPropertyValue('transform');
// transformValue is a string of the form "matrix(1, 0, 0, 1, 0 ,0)".
// For this example the first number in the matrix corresponds to the scale.
// We'll use a regular expression to extract it.
var currentScale = transformValue.match(/matrix\(([\d.]+)\,/)[1];
redLabel.textContent = Math.round(currentScale * 100) + '%';
requestAnimationFrame(updateLabels);
}
requestAnimationFrame(updateLabels);
body {
background-color: #584E56;
}
h1 {
color: #fff;
text-align: center;
margin: 10px 0;
font-family: 'Roboto', sans-serif;
font-weight: bold;
font-size: 2.4rem;
text-transform: uppercase;
letter-spacing: .3rems;
}
svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
}
.red, .green {
transform-origin: 60% 60%;
-webkit-animation: zoom 1s ease-in-out infinite alternate;
animation: zoom 1s ease-in-out infinite alternate;
}
#keyframes zoom {
from {
transform: scale(1, 1);
}
to {
transform: scale(0.7, 0.7);
}
}
.timeline {}
<h1>Animation SVG</h1>
<span class="" id="red-grow">
<!-- display here the red circle's value when growing and shrinking -->
Value:
</span>
<span class="" id="green-grow">
<!-- display here the green circle's value when growing and shrinking -->
</span>
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M-1-1h502v302H-1z"/>
<g>
<path class="timeline" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="4.5" stroke="#000" fill="none" d="M39.5 31.5v239M463.5 269.5l-422-1"/>
<ellipse class="red" id="inner" stroke="#e5a3a3" ry="65.5" rx="67" cy="165" cx="158.5" stroke-width="4.5" fill="none"/>
<ellipse class="green" stroke="#98FB98" ry="65.5" rx="67" cy="165" cx="361.5" stroke-width="4.5" fill="none"/>
</g>
</svg>
However in my opinion, it might be more straightforward to avoid using CSS animation, and instead update the circle transform or radius yourself in the requestAnimationFrame() function.