Develop Reference

How to use browser's default 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/

positioning of an SVG based on the animation SVG

I'm trying to make a submarine (SVG) seem as if it's floating on top of a
wave (also SVG).
Since the wave is constantly going up and down, I want the submarine to be centered vertically (x), but be moving horizontally on top of the wave.
This is the code for the wave
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>

I added a class called 'sub' to get your picture formatted and also to add the animation. Notice I added the 'ease-out' as the animation timing function so that it goes down fast but up slower to keep up with the wave timing. But this is also just a result of tweaking the parameters and the animation 'updown' just right so that its working in the opposite direction to the wave based on how it starts. This is one way to do it, if you want to tweak the height or the ease out just change the seconds on ease-out in the 'sub' class or tweak the pixel count in the updown function. Hope this helps!
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.sub{
position: absolute;
top: 85%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -100px; /* Start height margin */
margin-left: -50px; /* Half the width */
animation: updown 7s cubic-bezier(0.42, 0, 0.58, 1) infinite;
animation-timing-function:ease-in-out;
transform: translate3d(0, 0, 0);
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier(0.36, 0.48, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite,
swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
#keyframes updown {
0%, 100% {
transform: translate3d(0,-40px,0);
}
70% {
transform: translate3d(0,45px,0);
}
}
<img class = "sub" src = "https://image.flaticon.com/icons/svg/447/447773.svg">
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>

Safari pauses CSS3 Animation on submission of a form or redirect

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>

On click trigger not keeping full animation

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

progress bar only works on page load/reload only

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" />