I would like to toggle a spinner on a form submission that returns a FileResult from the server after some processing. However, since I do not refresh the page, the spinner does not get disabled automatically with my current implementation.
How can I detect the successful response with JavaScript to download my file normally, and disable the spinner after it is generated?
I would like to avoid roundabout methods that involve refreshing the page or downloading the file using JavaScript, if possible.
Below is a modified version of my page as a code snippet. In my actual code, I use #using (Html.BeginForm()) instead of a raw HTML form.
window.onload = function() {
$("form").on("submit", function() {
startSpinner();
});
};
window.onbeforeunload = function() {
stopSpinner();
};
function startSpinner() {
$(".overlay").css("display", "initial");
}
function stopSpinner() {
$(".overlay").css("display", "none");
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 9999;
}
.loader {
position: fixed;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: 100px;
}
.loader:before {
content: '';
display: block;
padding-top: 100%;
}
.circular {
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
height: 100%;
-webkit-transform-origin: center center;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
#-webkit-keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
#keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay" style="display: none;">
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10" />
</svg>
</div>
</div>
<!-- Some fields... -->
<form>
<button type="submit" class="btn btn-primary" id="analysis-submit-btn">Submit</button>
</form>
Typical controller method:
var myPackage = myFunction(myParameters);
var myFileName = "filename";
return File(myPackage, MediaTypeNames.Application.Octet, myFileName);
Since you are doing a full POST, instead of an ajax call and are returning a file, instead of refreshing the view, you are somewhat limited to what you can do.
Looks like someone came up with a fairly innovative solution to this very problem:
http://dejanstojanovic.net/jquery-javascript/2015/march/detect-when-file-download-request-is-finished-with-jquery/
It involves setting a cookie from the controller that returns the file. Then when you submit the form, you start checking to see if you have that cookie. If you have that cookie, it means the request has been sent down to the user.
Related
I'm trying to set up a page loader for my website. Every time a user loads another page it will show the page loader until the page is done loading.
But for most of the cases, the web load so fast, and the page loader isn't shown. I tried to use setTimeout for 5 seconds but it make the loader show endlessly.
Anyone know how to fix this?
Here's my code:
$(document).ready(function(){
setTimeOut(()=> {
$('.loader').remove();
} , 5000); // after 5 sec it will remove.
});
/*Loading Screen*/
.loader {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background-color:#221e1e;
z-index: 99;
text-align: center;
}
.loader img {
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
left: 45%;
z-index: 100;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader">
<img src="img/logo/logo1.png" width="200px" height="75px">
</div>
javascript is Case Sensitive language
So it is sensitive to the letters uppercase and uppercase
The letter o is a large setTimeOut function that must be small, ie: setTimeout
$(document).ready(function(){
setTimeout(()=> {
$('.loader').remove();
} , 5000); // after 5 sec it will remove.
});
/*Loading Screen*/
.loader {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background-color:#221e1e;
z-index: 99;
text-align: center;
}
.loader img {
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
left: 45%;
z-index: 100;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader">
<img src="img/logo/logo1.png" width="200px" height="75px">
</div>
It is also good to know these things:
The loader is usually installed when the screen is not fully loaded
$(document).ready(function () {
}
ready() Runs when the page is fully loaded
You can write your loader outside of this function
Please read the following links:
https://api.jquery.com/ready/
Adding a page loader using jQuery
How to do jquery code AFTER page loading?
Description: Specify a function to execute when the DOM is fully loaded.
You can also use the following plugin for the loader
https://plugins.jquery.com/loader/
Currently, I am working on creating my blog. And there, I uses ajax infinite loader script. While loading posts it shows loading gif like this:
But I don't want to use that gif. Instead of that I want to use the browsers default loading bar(You must see these loading bar in the address bar while your requested page is loading in your browser. I attached that loader to help you).
Edit 1: Here is the link to script (https://helplogger.blogspot.com/2016/09/load-more-blogger-posts-or-infinite-scrolling.html) which I am using. You can easily find the gif link in the script. And I want that gif to replace with the built-in chrome/any browser loader.(Because I am thinking that this will decrease the blog time a little bit.)
You can make one like that without use of image. You will need css and html.
HTML
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
</div>
CSS
.loader {
position: relative;
margin: 0px auto;
width: 100px;
}
.loader:before {
content: '';
display: block;
padding-top: 100%;
}
.circular {
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
height: 100%;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes
rotate { 100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes
rotate { 100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes
dash { 0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#keyframes
dash { 0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#-webkit-keyframes
color { 100%, 0% {
stroke: #3cba54;
}
40% {
stroke: #3cba54;
}
66% {
stroke: #3cba54;
}
80%, 90% {
stroke: #3cba54;
}
}
See Live Example
You should change colors according to your theme
Try it...
Source: https://www.cssscript.com/animated-google-loader-with-svg-and-css/
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'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