how to show loading by html img element load remote src - javascript

Currently when I open a page it shows a blank then the picture slowly shows up i want this kind of loading a remote picture to display a state with a fixed height use jquery code

from you question I think you want to use loader while loading the images.
you can use css code to generate loader
<div class="loader"></div>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
than you can use class name in jquery to hide or show the loader at button click or page load
for hide loader
$('.loader').hide();
for show loader
$('.loader').show();

Related

Triangle/Slanted Menu Style?

I would like to create the following webpage, where the navigation bar drops down on and is slanted.
So when a user opens the website its front page looks like
]1
Then when a user presses the "menu button" (which I have not drawn), the following menu bar appears (ideally slides down as an animation)
I really need help with designing the slanted navigation bar and adding the subsequent animation.
Thanks!
You can use an SVG shape as a background, and really any shape you want to make.
CodePen Link with an animation as well
HTML:
<div class="triangle-container">
<svg height="300" width="500">
<polygon points="0,-200 500,-200 500,100" class="triangle" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
CSS:
body{
}
.triangle-container{
width: 500px;
margin: auto;
text-align:center;
border: 1px solid white;
&:hover, &:active{
.triangle{
transform: translate(0px, 200px);
}
}
.triangle{
fill: black;
transition: all 0.8s ease-in-out;
#keyframes mymove {
0% {opacity:0}
50% {opacity:1}
100% {opacity:0}
}
transform-origin: 250px 250px;
}
}
One way of doing it is if you have a triangle image, with a height of 0. And all of your menu items are off the top of the screen, out of view. When you want the menu to slide down, use jquery animate to increase image height and slide all of the menu items down.
const time = 700;
$("#triangleId").animate({
height: "+=10px"
}, time);
$("#menuItemOneId, #menuItemTwoId...").animate({
top: "+=10px"
}, time);
I made a little way using clip-path and css keyframes. This way you can avoid javascript and the code is responsive no pixels needed.
HTML
<html>
<body>
<div class = 'navbar'></div>
</body>
</html>
CSS
.navbar{
width: 100vw;
height: 25vh;
background-color: red;
clip-path: polygon(100% 0, 100% 100%,0% 0%);
animation: open 3s infinite;
}
#keyframes open{
0% {clip-path:polygon(100% 0, 100% 0,100% 0);}
100% {clip-path:polygon(100% 0, 100% 100%,0% 0%);}
}
Link to code pen for this:
https://codepen.io/mfortunato/pen/jOWmXvL

How do i stop webkit animation through js? + fixing image to the right

I'm trying to build a puzzle game website. I'm using webkit animation to rotate (and translate) two images.
My plan is to have rotating gears attached to the left and right edge of my page, offset in a way that only half of each image is shown at a time.
The animation works fine but
(1) i am unable to pause it, and
(2) depending on window size the images are moved out of view (with an automatic scrollbar popping up) or into full view.
The setup is pretty simple:
I have 3 divs: one bar at the top with 100% width and two divs with 50% width below as containers for my images.
I might need to add more below or in between the two divs down the road but for now a solution for this would be good enough^^
For the animation i have a pseudo button on each side which adds a pause class to my images.
HTML
<div id="div-left">
<p>Hey this is the left div</p>
<img src="images/zahnrad.png" alt="zahnrad" id="image1">
<p id="pausebtn1" onclick="pause1()">pause</p>
</div>
<div id="div-right">
<p>hey this is the right div</p>
<img src="images/zahnrad.png" alt="zahnrad" id="image2">
<p id="pausebtn2" onclick="pause2()">pause</p>
</div>
CSS
#image1{
-webkit-animation: rotation-left 30s infinite linear;
}
#image1.paused1::-webkit-progress-value{
-webkit-animaion-play-state:paused;
animaion-play-state:paused;
}
#image2{
align: right;
-webkit-animation: rotation-right 30s infinite linear;
}
#image2.paused2::-webkit-progress-value{
-webkit-animaion-play-state:paused;
animaion-play-state:paused;
}
/* Animations */
#-webkit-keyframes rotation-left{
from {
-webkit-transform: translate(-50%,0px) rotate(0deg);
}
to{
-webkit-transform: translate(-50%,0px) rotate(359deg);
}
}
#-webkit-keyframes rotation-right{
from {
-webkit-transform:translate(+50%,0px) rotate(0deg);
}
to{
-webkit-transform:translate(+50%,0px) rotate(-359deg);
}
}
Javascript
function pause1() {
console.log("pause img 1");
document.getElementById('image1').classList.toggle("paused1");
}
function pause2() {
console.log("pause img 2");
document.getElementById('image2').classList.toggle("paused2");
}
So to sum it all up:
I have two images in the wrong places. They are animated. My two buttons are working but trying to pause the animation by adding a paused class doesn't function.
Any help would be appreciated and i'll see if i can add images later
You shouldn't be targeting ::-webkit-progress-value, that's for <progress> elements. Just toggle the class onto the element:
button.addEventListener('click', function () {
square.classList.toggle('paused');
});
#square {
animation: rotate 1s infinite;
background: lightblue;
border: 1px solid black;
height: 100px;
left: 50px;
position: absolute;
top: 50px;
width: 100px;
}
#square.paused {
animation-play-state: paused;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<button id="button">Pause/Resume</button>
<div id="square">Rotate</div>

Display loading circle when button is clicked in php website using javascript?

I'm new to programming in javascript and am having a lot of difficulty doing something I believe is simple. I have a loading circle that I want to display when an upload button is clicked (and also want my external php code to run to do image processing). Then, I want the loading screen to go away once the php page is done loading. I'm currently having trouble even getting the loading screen to show. I have the loading circle code in the style section of my header as so:
<head>
<style>
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 25%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #00ff00;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
Then, I have my upload button and the script in the body as so:
<p class="text-center">
<button onclick="loadingCircle()"> Click to Upload! </button>
</p>
<div id="loader" style="display:none;"></div>
<script>
function loadingCircle() {
$("#loader").show();
}
</script>
Currently, when I click the upload button, no action is happening... any help is appreciated and apologies for the noobness.
Add jquery file https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
or you can hide by using simple javascript:
<script>
function loadingCircle() {
document.getElementById('loader').style.display='block';
}
</script>
the $("#loader") points to the fact that you are trying to use jQuery, which you have not included.
Include it from a cdn, and it should work

How to create a CSS transition where the image scales out of the thumbnail?

I want to create a transition like the one at http://google.com/photos. Click on Go To Google Photos. If you click on a photo, you will see that the photo transitions from it current container (the thumbnail) to the center and the back of the screen is blacked out. When we close the preview, the photo transitions back to the thumbnail container. How do you implement such a transition using CSS and Jquery? I tried doing so in CSS but I'm only only able to get the photo to transition from the center of the page to show the user its full screen not from where the thumbnail of the photo is located.
Here's what I have so far:
#keyframes fadeInScale {
0%{
opacity:0;
transform: scale(0.5);
}
100%{
opacity:1;
transform: scale(1);
}
}
#keyframes fadeOutScale {
0%{
opacity:1;
transform: scale(1);
}
100%{
opacity:0;
transform: scale(0.5);
}
}
.overlay {
position: fixed;
width: 100%;
top: 100%;
left: 0px;
height: 0;
z-index: 500;
overflow: auto;
transition: all 0.4s;
&.show {
top: 0px;
height: 100%;
}
}
.fade-scale-in {
display: block;
animation: fadeInScale 0.3s 1 ease-out;
}
.fade-scale-out {
display: block;
animation: fadeOutScale 0.3s 1 ease-out;
}
Here's the html
When I click on the div with the image, I add the class fade-scale-in to the overlay that shows the image in full screen. The image gets shown in a full screen preview overlay. When you exit the preview overlay, I add the class fade-scale-out and remove the class fade-scale-in to the overlay that shows the image in full screen.

CSS3 page loading effect trigger by jquery

Hi friends I am trying to make CSS3 animation which will be trigger by jquery. Ie when the user submit some form I need to display animation (css3) for some duration and redirect it to the next page.
CSS3 animation:
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
#-moz-keyframes spinPulse {
0% {
-moz-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-moz-transform: rotate(145deg);
opacity: 1;
}
100% {
-moz-transform: rotate(-320deg);
opacity: 0;
};
}
#-moz-keyframes spinoffPulse {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
};
}
#-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
};
}
#-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
};
}
This is html
<div class="circle"></div>
<div class="circle1"></div>
<button class="next" name="submit" id = "submit"></button>
Now when I user click on I need to display this effect for a fraction of time (some thing like alert box I mean while this animation is playing user shouldnt be able to do anything in the rest of the page)
Usually you make the page inaccessible by covering it with an element - an "overlay".
HTML:
<div class="loadingOverlay">
<div class="circle"></div> <!-- it makes sense to put these inside -->
<div class="circle1"></div>
</div>
CSS:
.loadingOverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
To activate it when the user clicks the submit button, just make it "hidden" by default. And when the user clicks the button, make it "visible". In it's most basic form:
$('#submit').on('click', function () {
$loadingOverlay.css('display', 'block');
});
and the extra needed CSS:
.loadingOverlay {
/* ... */
display: none;
}
On the example I provide below you won't see the animation. The next page, by being blank, just loads too quickly. But you will see it on a "real" website situation.
Here's the live example: http://jsfiddle.net/9H7wf/2/
EDIT:
Max Boll suggested having the "loading effect" happening on the "new" page. It makes sense. But while a new page is being fetched, the "old" one still remains visible until a few key "http" things happen. See http://www.stevesouders.com/blog/2012/12/03/the-perception-of-speed/
So, it does make sense to have it on the "old" page.
I'd suggest you to use jQuery for this.
By default you could display your animation as an overlay (as JOPLOmacedo said).
Then you add the following to your javascript:
$(document).ready(function() {
$('.loadingOverlay').fadeOut();
});
This will show the loading overlay as long as the site needs to load (which you actually wanna show by that loading animation). Once the page is loaded, this javascript will fade it out.
My solution is based on JOPLOmacedo's answer.
EDIT
I just saw your new comment. To show it on button click, you can do it like this:
$(document).ready(function() {
$('.button').click(function() {
$('.loadingOverlay').fadeIn();
});
});
Inside of the click event function you could start an interval to fade it out again after X seconds.
Hi Friends I found a solution to this one Thanx #JOPLOmacedo for helping me to fix this one
$function(){
$('#submit').click(function(){
$('.loadingOverlay').css('display', 'block');
function complete() {
$('.loadingOverlay').css('display', 'none');
}
$('.circle').hide().fadeIn(1000,complete);
$('.cirlce1').hide().fadeIn(1000,complete);
});
}

Categories

Resources