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
Related
const menu = document.querySelector('.pageLinksButton')
const links = document.querySelector('.pageLinks')
menu.addEventListener('click', () => {
menu.classList.toggle("active");
links.classList.toggle("linksActive");
})
body {
background-color: #323232;
position: relative;
}
#keyframes slide {
0% {
opacity: 0.0;
transform: translateY(50px)
}
20% {
opacity: 0.2;
transform: translateY(40px)
}
40% {
opacity: 0.4;
transform: translateY(30px)
}
60% {
opacity: 0.6;
transform: translateY(20px)
}
80% {
opacity: 0.8;
transform: translateY(10px)
}
100% {
opacity: 1.0;
transform: translateY(00px)
}
}
.pageLinks {
display: none;
position: fixed;
top: 5%;
right: 50%;
transition: 1s ease;
}
.pageLinks.linksActive {
display: block;
}
.pageLinks ul {
writing-mode: vertical-rl;
transform: rotate(180deg);
margin: 0;
list-style: none;
}
.pageLinks ul li {
float: left;
margin: 20px 0px;
animation: slide 0.3s linear;
}
.pageLinks ul li a {
color: #DBDBDB;
font-family: 'poppins', sans-serif;
font-size: 16px;
text-decoration: none;
margin: 0;
}
.pageLinksButton {
cursor: pointer;
transition: transform 800ms;
position: fixed;
top: 0%;
right: 49%;
}
.line {
fill: none;
transition: stroke-dasharray 800ms, stroke-dashoffset 800ms;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
}
.pageLinksButton.active {
transform: rotate(-45deg);
}
.line:nth-child(1) {
stroke-dasharray: 25 120;
}
.line:nth-child(3) {
stroke-dasharray: 25 120;
}
.pageLinksButton.active .line:nth-child(1) {
stroke-dashoffset: -90px;
}
.pageLinksButton.active .line:nth-child(3) {
stroke-dashoffset: -90px;
}
<svg class="pageLinksButton hamRotate" viewBox="0 0 100 100" width="50">
<path class="line" d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20" />
<path class="line" d="m 70,50 h -40" />
<path class="line" d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20" />
</svg>
<nav class="pageLinks">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
Animation works when links are opened, but not when I close them.
I tried to animate other classes, but it was worse, that's the most I could do
Well, first of your animation is working only in one direction. Secondly, you're using "display: none" property. In your case the moment you "click" to hide menu your elements acquire "display: none" property which make them vanish instantly.
In my example I've just created another animation called "slide-reversed" and changed display: none; for opacity property. However, this isn't a solution, because underneath the elements are still present and "clickable". There isn't css solution to animate properties like display or visibility, so I would recommend either play with width and overflow to achieve what you want, or delay property change via JS.
Example without display:none;
const menu = document.querySelector(".pageLinksButton");
const links = document.querySelector(".pageLinks");
menu.addEventListener("click", () => {
menu.classList.toggle("active");
links.classList.toggle("linksActive");
});
body {
background-color: #323232;
position: relative;
}
#keyframes slide {
0% {
opacity: 0;
transform: translateY(50px);
}
20% {
opacity: 0.2;
transform: translateY(40px);
}
40% {
opacity: 0.4;
transform: translateY(30px);
}
60% {
opacity: 0.6;
transform: translateY(20px);
}
80% {
opacity: 0.8;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(00px);
}
}
#keyframes slide-reverse {
100% {
opacity: 0;
transform: translateY(50px);
}
80% {
opacity: 0.2;
transform: translateY(40px);
}
60% {
opacity: 0.4;
transform: translateY(30px);
}
40% {
opacity: 0.6;
transform: translateY(20px);
}
20% {
opacity: 0.8;
transform: translateY(10px);
}
0% {
opacity: 1;
transform: translateY(00px);
}
}
.pageLinks {
/* display: none; */
opacity: 0;
position: fixed;
top: 15%;
right: 50%;
transition: 0s ease;
transition-delay: 0.3s;
}
.pageLinks.linksActive {
transition: 0.3s ease;
transition-delay: 0s;
opacity: 1;
}
.pageLinks ul {
writing-mode: vertical-rl;
transform: rotate(180deg);
margin: 0;
list-style: none;
}
.pageLinks ul li {
float: left;
margin: 20px 0px;
animation: slide-reverse 0.3s linear;
}
.pageLinks.linksActive ul li {
float: left;
margin: 20px 0px;
animation: slide 0.3s linear;
}
.pageLinks ul li a {
color: #dbdbdb;
font-family: "poppins", sans-serif;
font-size: 16px;
text-decoration: none;
margin: 0;
}
.pageLinksButton {
cursor: pointer;
transition: transform 800ms;
position: fixed;
top: 0%;
right: 49%;
}
.line {
fill: none;
transition: stroke-dasharray 800ms, stroke-dashoffset 800ms;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
}
.pageLinksButton.active {
transform: rotate(-45deg);
}
.line:nth-child(1) {
stroke-dasharray: 25 120;
}
.line:nth-child(3) {
stroke-dasharray: 25 120;
}
.pageLinksButton.active .line:nth-child(1) {
stroke-dashoffset: -90px;
}
.pageLinksButton.active .line:nth-child(3) {
stroke-dashoffset: -90px;
}
<svg class="pageLinksButton hamRotate" viewBox="0 0 100 100" width="50">
<path
class="line"
d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20"
/>
<path class="line" d="m 70,50 h -40" />
<path
class="line"
d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20"
/>
</svg>
<nav class="pageLinks">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
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/
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 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
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.