I am triggering an svg checmark with a button. The way I am doing it is setting the checkmark to opacity:0; and then once the button is clicked, adding a class fadeIn and putting the opacity to opacity:1;.
My issue is when the opacity is set to 0 the animation is altered. The full animation isn't showing. You can see this by taking the opacity:0 out of the chechmark class and running the fiddle again.
My question is, how can I get this checkmark to trigger/display with the button while keeping the full animation sequence.
Here is a fiddle. The snippet isn't producing the checkmark, not sure why.
$('#trigger').on('click', function () {
$('.checkmark').addClass('fadeIn');
});
.checkmark {
width: 200px;
height: 200px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
margin: 10% auto;
box-shadow: inset 0px 0px 0px #0783a7;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
opacity: 0;
z-index: 2;
}
.checkmark-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 5;
stroke-miterlimit: 10;
stroke: #0783a7;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check {
transform-origin: 50% 50%;
stroke-dasharray: 70;
stroke-dashoffset: 70;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 100px #0783a7;
}
}
.fadeIn {
opacity: 1;
transition: all 0.8s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="trigger">Trigger</button>
<div id="wrap">
<div id="checkmark-text">All Templates Selected</div>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
<path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
</div>
You can fix this by running the animation rule on the required elements based on the addition of the .fadeIn class instead of placing it on the classes the elements have when they load. Try this:
.checkmark {
width: 200px;
height: 200px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
margin: 10% auto;
box-shadow: inset 0px 0px 0px #0783a7;
z-index: 2;
opacity: 0;
}
.checkmark-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 5;
stroke-miterlimit: 10;
stroke: #0783a7;
fill: none;
}
.checkmark-check {
transform-origin: 50% 50%;
stroke-dasharray: 70;
stroke-dashoffset: 70;
}
.checkmark.fadeIn {
opacity: 1;
transition: all 0.8s ease;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark.fadeIn .checkmark-circle {
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark.fadeIn .checkmark-check {
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 100px #0783a7;
}
}
Updated fiddle
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I have been trying to control the rate of drops per minute. is it possible to control the rate of drops depending on the Drops in each minute: input? Like when the input value is 60, there will be 60 water drops in each minute (animation: drop 1s). What would be best way to achieve that?
Thanks in advance for your suggestion.
Fiddle link to the code is here.
body {
background: #e8e5ea;
}
.wrap {
position: absolute;
width: 100px;
height: 200px;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -100px;
}
.drop {
width: 40px;
height: 40px;
left: 50%;
margin-left: -20px;
position: absolute;
animation: drop 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s infinite;
}
.drop circle {
fill: #2a96ed;
}
.drop-outer {
position: absolute;
box-sizing: border-box;
/* border: 1px solid #333; */
width: 100px;
height: 200px;
overflow: hidden;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
background-clip: padding-box;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
.ripple {
position: absolute;
box-sizing: border-box;
width: 240px;
height: 240px;
top: 68px;
left: -70px;
perspective: 100;
transform: rotateX(65deg);
}
.ripple .ripple-svg {
position: absolute;
width: 240px;
height: 240px;
opacity: 0;
}
.ripple .ripple-svg circle {
fill: none;
stroke: #2a96ed;
stroke-width: 10px;
stroke-alignment: inner;
}
.ripple-1 {
animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}
.ripple-1 .ripple-svg {
animation: fade-in-out 2s linear 0s infinite;
}
.ripple-1 .ripple-svg circle {
animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}
.ripple-2 {
animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}
.ripple-2 .ripple-svg {
animation: fade-in-out 2s linear 0.2s infinite;
}
.ripple-2 .ripple-svg circle {
animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}
.ripple-3 {
animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}
.ripple-3 .ripple-svg {
animation: fade-in-out 2s linear 0.35s infinite;
}
.ripple-3 .ripple-svg circle {
animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}
#keyframes drop {
0% {
transform: scale3d(0.01,0.01,0.01) translateY(0)
}
10% {
transform: scale3d(1,1,1)
}
44% {
transform: scale3d(1,1,1) translateY(200px)
}
100% {
transform: scale3d(1,1,1) translateY(200px)
}
}
#keyframes fade-in-out {
0% {opacity: 0}
42% {opacity: 0}
52% {opacity: 1}
65% {opacity: 1}
100% {opacity: 0}
}
#keyframes ripple {
0% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
42% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
100% { transform: rotateX(65deg) scale3d(0.9, 0.9, 0.9) }
}
#keyframes border {
0% { stroke-width: 6px }
42% { stroke-width: 6px }
100% {stroke-width: 2px }
}
Drops in each minute: <input type="number" id="number"/><br>
<div class="wrap">
<div class="drop-outer">
<svg class="drop" viewBox="0 0 40 40" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20"/>
</svg>
</div>
<div class="ripple ripple-1">
<svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
</svg>
</div>
<div class="ripple ripple-2">
<svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
</svg>
</div>
<div class="ripple ripple-3">
<svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
</svg>
</div>
</div>
Only if you specify the relevant styles via JavaScript.
Your example is rather complex and not really minimal, so here is a simplified example that shows the idea:
const animateInner = document.querySelector('#animate .inner');
const input = document.querySelector('input');
document.querySelector('button').addEventListener('click', function() {
console.log('update to', `${input.value || 0}s`);
animateInner.style.animationDuration = `${input.value || 0}s`;
});
#animate {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
}
#animate .inner {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: #F00;
animation-name: fill;
animation-iteration-count: infinite;
}
#keyframes fill {
from {
top: 100%;
}
to {
top: 0;
}
}
<label>Duration in seconds: <input /></label>
<button>Update</button>
<div id="animate"><div class="inner"></div></div>
In a nutshell, you're going to want to control the "animation-duration" property. This will affect how quickly it happens. Since you want "drops per minute", you'll have to do a little math to convert that to a duration.
Since it looks like your animation has several things working in unison, you'll want to update them all at the same time.
So you can use
animation-iteration-count CSS3 property, the secret is you get the number and update the css
$(function(){
$('#number').on('change', function(){
var count = $(this).val();
$('.drop').css('animation-iteration-count', count);
$('.ripple-1').css('animation-iteration-count', count);
$('.ripple-1 .ripple-svg').css('animation-iteration-count', count);
$('.ripple-1 .ripple-svg circle').css('animation-iteration-count', count);
$('.ripple-2').css('animation-iteration-count', count);
$('.ripple-2 .ripple-svg').css('animation-iteration-count', count);
$('.ripple-2 .ripple-svg circle').css('animation-iteration-count', count);
$('.ripple-3').css('animation-iteration-count', count);
$('.ripple-3 .ripple-svg').css('animation-iteration-count', count);
$('.ripple-3 .ripple-svg circle').css('animation-iteration-count', count);
});
});
JSfiddle
I am developing a simple web page where I want to show a spinner in the center of the page when the form is submitted. It works in Chrome but, in Safari the CSS animation stops as soon as the form is submitted. Since the animation is 2 seconds longs it does not perform the animation at all.
This is the entire HTML, CSS and JS to replicate the issue. Save the contents in a HTML file and open it in Chrome first to see how it should behave and then open in Safari to see the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.circular {
display: inline-block;
height: 60px;
left: 50%;
margin-left: -30px;
margin-top: -30px;
position: fixed;
top: 50%;
transform: rotate(-90deg);
width: 60px;
}
.circle {
animation: circular-indeterminate-bar-rotate 2s linear infinite;
box-sizing: border-box;
height: 100%;
width: 100%;
}
.path {
animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
fill: none;
stroke: rgba(12,18,28, 0.87);
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
stroke-linecap: round;
stroke-miterlimit: 20;
stroke-width: 4;
transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
}
#keyframes circular-indeterminate-bar-rotate {
to {
transform: rotate(1turn);
}
}
#keyframes circular-indeterminate-bar-dash {
0% {
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -43.75;
}
to {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -155;
}
}
</style>
</head>
<body>
<div class="circular">
<svg class="circle" viewBox="0 0 60 60"><circle class="path" cx="30" cy="30" r="25"></circle></svg>
</div>
<script>
window.location.href = 'http://httpbin.org/delay/100';
</script>
</body>
</html>
This is working Fine in safari also.
.circular {
display: inline-block;
height: 60px;
left: 50%;
margin-left: -30px;
margin-top: -30px;
position: fixed;
top: 50%;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 60px;
}
.circle {
-webkit-animation: circular-indeterminate-bar-rotate 2s linear infinite;
animation: circular-indeterminate-bar-rotate 2s linear infinite;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 100%;
}
.path {
-webkit-animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
fill: none;
stroke: rgba(12,18,28, 0.87);
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
stroke-linecap: round;
stroke-miterlimit: 20;
stroke-width: 4;
-webkit-transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
-o-transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
}
#-webkit-keyframes circular-indeterminate-bar-rotate {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
#keyframes circular-indeterminate-bar-rotate {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
#-webkit-keyframes circular-indeterminate-bar-dash {
0% {
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -43.75;
}
to {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -155;
}
}
#keyframes circular-indeterminate-bar-dash {
0% {
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -43.75;
}
to {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -155;
}
}
<div class="circular">
<svg class="circle" viewBox="0 0 60 60"><circle class="path" cx="30" cy="30" r="25"></circle></svg>
</div>
I have created a circle animation and it works fine, however I am trying to change from solid lines to dotted lines, but I am wondering how to get it done, can somebody please suggest?
Here is how it looks right now:
#loading {
width: 50px;
height: 50px;
margin: 30px auto;
position: relative;
}
.outer-shadow, .inner-shadow {
z-index: 4;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
}
.inner-shadow {
top: 1px;
left: 1px;
width: 48px;
height: 48px;
margin-left: 0;
margin-top: 0;
border-radius: 100%;
background-color: #ffffff;
}
.hold {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0px, 50px, 50px, 25px);
border-radius: 100%;
background-color: #fff;
}
.fill, .dot span {
background-color: #f00;
}
.fill {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
z-index: 1;
-webkit-animation: left 1s linear;
-moz-animation: left 1s linear;
animation: left 1s linear both;
}
#keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
#-webkit-keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(180deg);
}
}
.right {
z-index: 3;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.right .fill {
z-index: 3;
-webkit-animation: right 1s linear;
-moz-animation: right 1s linear;
animation: right 1s linear both;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#keyframes right {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
#-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
margin-left: 8px;
margin-top: 7px;
}
<div id='loading'>
<div class='outer-shadow'> </div>
<div class='inner-shadow'> </div>
<div class='hold left'>
<div class='fill'></div>
</div>
<div class='hold right'>
<div class='fill'></div>
</div>
</div>
Here is another snippet for your question. There is no genuine way to move dotted lines. Instead, I cover/uncover the dotted circle below with another circle with white border. Please see below:
#c1 {
stroke-width: 1px;
stroke: red;
fill: transparent;
stroke-dasharray: 5;
}
#c2 {
animation: render 1s linear both;
stroke-width: 5px;
stroke: white;
fill: transparent;
stroke-dasharray: 377;
stroke-dashoffset: 0;
}
#keyframes render {
100% {
stroke-dasharray: 377;
stroke-dashoffset: -377;
}
}
<svg width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
<circle id="c1" cx="120" cy="120" r="60" />
<circle id="c2" cx="120" cy="120" r="60" />
</svg>
.circle {
border-radius: 50%;
width: 50px;
height: 50px;
border: 2px dotted transparent;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
position: relative;
margin: 30px auto;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
25% {
border-right-color: red;
}
50% {
border-bottom-color: red;
}
75% {
border-left-color: red;
}
100% {
border-top-color: red;
border-left-color: red;
border-bottom-color: red;
border-right-color: red;
transform: rotate(360deg);
}
}
<div class="circle"></div>
Edit, Updated
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
border-color: transparent;
border-style: hidden;
border-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-style: dotted;
border-right-style: dotted;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
animation-delay: .25s;
position: relative;
margin: 30px auto;
transform: rotate(45deg);
transition: border 1s ease-in .25s;
}
#keyframes spin {
0% {
border-top-width: 2px;
border-top-color: red;
}
25% {
border-right-width: 2px;
border-right-color: red;
}
50% {
border-bottom-width: 2px;
border-bottom-color: red;
}
75% {
border-left-width: 2px;
border-left-color: red;
}
100% {
border: 2px dotted red;
}
}
<div class="circle"></div>
If possible, I would like to strongly recommend to use SVG as it will make your life way easier.
In the example below, I am using stroke-dasharray and stroke-dashoffset to manipulate the border. stroke-dasharray stands for the length of dashes, and stroke-dashoffset means offset from where dashed line begins.
By default, I assigned stroke-dasharray: 377; and stroke-dashoffset: 377;. It means it uses 377px length of dashes and spaces in between, with 377px offset.
If you change stroke-dashoffset to 0, it will gradually draw(reduce offset) the circle border. As the length of circumference is about 377px (2 x Pi x 60px), it will make a circle without any dashes.
At the last frame of the animation, as soon as you change the stroke-dasharray to smaller numbers, it will transform its border to dashes.
circle {
stroke-width: 1px;
stroke: red;
fill: transparent;
stroke-dasharray: 377;
stroke-dashoffset: 377;
animation: render 1s linear both;
}
#keyframes render {
99% {
stroke-dasharray: 377;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 5;
stroke-dashoffset: 0;
}
}
<svg width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
<circle cx="80" cy="80" r="60" />
</svg>
I'm developing the loading animation below but I'm running into problems.
I can't get the heart's stroke-dashoffset animation to start at the crack, top center of the heart. To clarify, the red "border" animation is the problem. It's starting at the wrong place.
I am creating the heart shape in Illustrator.
I make the shape http://imgur.com/a/3wziI
Next I convert the svg primitives <circle> and <rectangle> to <path> so they can be animated. http://imgur.com/a/sm1bG
I union the circles and rectangle to make the heart shape. http://imgur.com/a/31utR
How can I get the red "border" animation to start at the crack of the heart?
body { margin: 0 }
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-family: 'Cabin Sketch', cursive;
font-size: 4vw;
}
svg {
width: 25vw;
position: relative;
overflow: visible;
}
.circleLeft {
fill: transparent;
stroke: #585858;
stroke-width: 0.5;
stroke-dasharray: 312;
stroke-dashoffset: 312;
transform-origin: 59% 97%;
animation: leftCircleAnim 6s infinite;
animation-timing-function: cubic-bezier(0.4, -0.03, 0.82, 0.42);
}
.circleRight {
fill: transparent;
stroke: #585858;
stroke-width: 0.5;
stroke-dasharray: 312;
stroke-dashoffset: 312;
transform-origin: 14% 54%;
transition: 1s ease all;
animation: rightCircleAnim 6s infinite;
animation-timing-function: cubic-bezier(0.4, -0.03, 0.82, 0.42);
}
.rect {
fill: transparent;
stroke: #585858;
stroke-width: 0.5;
transition: 1s ease all;
transform-origin: 64% 57%;
stroke-dasharray: 303;
stroke-dashoffset: 303;
animation: rectAnim 6s infinite;
animation-timing-function: cubic-bezier(0.4, -0.03, 0.82, 0.42);
}
.heart {
stroke-dasharray: 332;
stroke-dashoffset: 332;
transition: 1s ease-in all;
stroke: #E21A39;
stroke-width: 0.5;
fill: transparent;
animation: heartAnim 6s infinite;
animation-timing-function: cubic-bezier(0.4, -0.03, 0.82, 0.42);
}
#keyframes rectAnim {
0% { stroke-dashoffset: 312; }
10% { stroke-dashoffset: 122; }
35% { transform: rotate(0deg); }
37% { stroke: #585858; }
45% { transform: rotate(-45deg); stroke: #e8e8e8; }
74% { opacity: 1 }
75% { opacity: 0 }
100% {
stroke-dashoffset: 122;
transform: rotate(-45deg);
stroke: #e8e8e8;
opacity: 0;
}
}
#keyframes leftCircleAnim {
10% { stroke-dashoffset: 312; }
25% { stroke-dashoffset: 122; transform: translateY(0); }
35% { transform: translateY(-22px); }
37% { stroke: #585858; }
45% { transform: translateY(-22px) rotate(-45deg); stroke: #e8e8e8; }
74% { opacity: 1 }
75% { opacity: 0 }
100% {
stroke-dashoffset: 122;
transform: translateY(-22px) rotate(-45deg);
stroke: #e8e8e8;
opacity: 0;
}
}
#keyframes rightCircleAnim {
10% { stroke-dashoffset: 312; }
25% { stroke-dashoffset: 122; transform: translateX(0); }
35% { transform: translateX(22px); }
37% { stroke: #585858; }
45% { transform: translateX(22px) rotate(-45deg); stroke: #e8e8e8; }
74% { opacity: 1 }
75% { opacity: 0 }
100% {
stroke-dashoffset: 122;
stroke: #e8e8e8;
transform: translateX(22px) rotate(-45deg);
opacity: 0
}
}
#keyframes heartAnim {
45% { stroke-dashoffset: 332; }
55% { stroke-dashoffset: 102; }
58% { fill: transparent; }
65% { fill: #E21A39; }
85% { opacity: 1; }
95% { opacity: 0; }
100% {
stroke-dashoffset: 102;
fill: #E21A39;
opacity: 0;
}
}
<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">
<main>
<h1>Heart Creation Loading Animation</h1>
<svg viewBox="-0.5 -0.5 77.95 71.6">
<title>heart</title>
<path class="rect" d="M61.05,56H15.94V10.87H61.05V56Z"/>
<path class="circleLeft" d="M15.94,33.43A22.55,22.55,0,0,0,55.85,47.84,22.56,22.56,0,0,0,34.12,11.29,22.53,22.53,0,0,0,15.94,33.43Z"/>
<path class="circleRight" d="M15.94,33.43A22.55,22.55,0,0,0,55.85,47.84,22.56,22.56,0,0,0,34.12,11.29,22.53,22.53,0,0,0,15.94,33.43Z"/>
<path class="heart" d="M180.09,6.55a22.89,22.89,0,0,0-25.74-4.38,22,22,0,0,0-6.11,4.4l0,0,0,0A22.54,22.54,0,0,0,110.52,25a22.64,22.64,0,0,0,5.85,13.35l0,0,31.9,31.9,31.9-31.9,0,0a21.77,21.77,0,0,0,1.65-1.8A22.83,22.83,0,0,0,180.09,6.55Z" transform="translate(-109.95 0.5)"/>
</svg>
</main>
I have a dev version where it's easier to mess with the heart's stroke-dasharray and stroke-dashoffset here http://codepen.io/tryggvigy/pen/rWjZOE
Disclaimer: Tis code is taken from this jsfiddle
I want to have youtube.com like progressbar, I have tried in this way
$('#search').click(function(){
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$('#progress').css('width', _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},
complete: function() {
}
});
});
#progress {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 0%;
height: 2px;
background: #b91f1f;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear
}
#progress.done {
opacity: 0
}
#progress dd,#progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #b91f1f 1px 0 6px 1px;
-ms-box-shadow: #b91f1f 1px 0 6px 1px;
-webkit-box-shadow: #b91f1f 1px 0 6px 1px;
box-shadow: #b91f1f 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%
}
#progress dd {
opacity: 1;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px)
}
#progress dt {
opacity: 1;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px)
}
#-moz-keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#-ms-keyframes pulse {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
#-o-keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#-webkit-keyframes pulse {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
#keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#progress.waiting dd,#progress.waiting dt {
-moz-animation: pulse 2s ease-out 0s infinite;
-ms-animation: pulse 2s ease-out 0s infinite;
-o-animation: pulse 2s ease-out 0s infinite;
-webkit-animation: pulse 2s ease-out 0s infinite;
animation: pulse 2s ease-out 0s infinite
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progress" class="waiting">
<dt></dt>
<dd></dd>
</div>
<input type="submit" id="search" value="Search" />
but it only works one time after page is loaded, I want this must work when ever I click Search button.
Just remove the done class from your progress div before starting new.
$("#progress").removeClass("done");
Its a litte more difficult to avoid the progress bar to first move back after starting new. First reset the width of it to 0, directly after adding done:
$("#progress").addClass("done").css('width', 0);
Due to the opacity transition, there is still some milliseconds when the bar going back to zero width is visible. So I ended up with simply hiding it (which sets its display property).
Here's the complete code:
$('#search').click(function(){
$("#progress").removeClass("done").show();
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$('#progress').css('width', _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done").hide();
}
},
complete: function() {
}
});
});
Try this: (I added comments on what I changed)
$('#search').click(function(){
$("#progress").removeClass("done");
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
if(_percent == 105) {
$('#progress').hide(); //make it invisible
$('#progress').css('width', "0%"); //Reset to 0
}else{
$('#progress').show(); //show it.
$('#progress').css('width', _percent+"%"); //progress
}
},
complete: function() {
}
});
});
#progress {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 0%;
height: 2px;
background: #b91f1f;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear
}
#progress.done {
opacity: 0
}
#progress dd,#progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #b91f1f 1px 0 6px 1px;
-ms-box-shadow: #b91f1f 1px 0 6px 1px;
-webkit-box-shadow: #b91f1f 1px 0 6px 1px;
box-shadow: #b91f1f 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%
}
#progress dd {
opacity: 1;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px)
}
#progress dt {
opacity: 1;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px)
}
#-moz-keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#-ms-keyframes pulse {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
#-o-keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#-webkit-keyframes pulse {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
#keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#progress.waiting dd,#progress.waiting dt {
-moz-animation: pulse 2s ease-out 0s infinite;
-ms-animation: pulse 2s ease-out 0s infinite;
-o-animation: pulse 2s ease-out 0s infinite;
-webkit-animation: pulse 2s ease-out 0s infinite;
animation: pulse 2s ease-out 0s infinite
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progress" class="waiting">
<dt></dt>
<dd></dd>
</div>
<input type="submit" id="search" value="Search" />