I've recently been working on a project which involves a heavyloaded webpage,
it loads the files in the background and then eventually will allow them to disappear after a certain amount of time,
I have tried my hardest to do some research but with many attempts I have not come to a usable conclusion. I'd love it if you could possibly help out,
I will probably edit my code later but for now im just using that codepen.io overused loading square, for your information.
If you can help, it'll be greatly appreciated, Here's my code.
Html
<!DOCTYPE html>
<html>
<head>
<style>html { overflow-y: hidden; }</style>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
s$("div.formSentMsg").delay(3200).fadeOut(300)
</script>
<div><center><i><p>Loading</p></i></center></div>
<meta charset="UTF-8">
<title>Loading Square</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div><span class="loader"><span class="loader-inner"></span></span></div>
</body>
</html>
Css
body, html {
height: 100%;
text-align: center;
}
body {
background-color: #edae38;
}
.loader {
display: inline-block;
width: 80px;
height: 80px;
position: relative;
border: 8px solid #3a3b3d;
animation: loader 4s infinite ease;
align-self: center;
box-shadow: 0px 0px 7px #3a3b3d;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #3a3b3d;
animation: loader-inner 4s infinite ease-in;
box-shadow: 0px 0px 2px #3a3b3d;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 100%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 0%;
}
100% {
height: 100%;
}
}
p {
font-family: 'bignoodletitling';
top: 50px;
padding-bottom: 1px;
padding-top: 200px;
color: #3a3b3d;
font-size: 110px;
text-align: center;
text-shadow: 0px 0px 3px #3a3b3d;
}
I understand,
As probably one of you it might be extremely easy for you to achieve this but when i receive your inputit's greatly appreciated and it helps me learn for future references,
Thanks. - David
Just remove the element that contains the loading stuff once all of your assets have loaded. I gave the loading element an ID (#loadingEl) and am using jQuery to remove it on $(window).on('load'...
body,
html {
height: 100%;
text-align: center;
}
body {
background-color: #edae38;
}
.loader {
display: inline-block;
width: 80px;
height: 80px;
position: relative;
border: 8px solid #3a3b3d;
animation: loader 4s infinite ease;
align-self: center;
box-shadow: 0px 0px 7px #3a3b3d;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #3a3b3d;
animation: loader-inner 4s infinite ease-in;
box-shadow: 0px 0px 2px #3a3b3d;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 100%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 0%;
}
100% {
height: 100%;
}
}
p {
font-family: 'bignoodletitling';
top: 50px;
padding-bottom: 1px;
padding-top: 200px;
color: #3a3b3d;
font-size: 110px;
text-align: center;
text-shadow: 0px 0px 3px #3a3b3d;
}
<!DOCTYPE html>
<html>
<head>
<style>
html { overflow-y: hidden; }
</style>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$("div.formSentMsg").delay(3200).fadeOut(300);
</script>
<div>
<center><i><p>Loading</p></i></center>
</div>
<meta charset="UTF-8">
<title>Loading Square</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div id="loadingEl"><span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on('load',function() {
$('#loadingEl').remove();
})
</script>
</body>
</html>
Related
I was trying to make an animation as an exercise to learn. When I hover over the circle, I want to apply an animation to it and also for the text in the .hide element to appear. But when I hover the circle and then move the mouse over the text, the animations stop.
Is there a way to keep both animation going even if I hover the text in the .hide element? I've tried to create an :hover subclass for the .hide class with animations, tried to add the animation to the .hide class, and tried both together, but I can't figure it out.
Also, that little black line that pops up at the beginning of the hover is annoying, if anyone know how to get rid of it.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.circle-icon:hover {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover + .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
There are a few changes you need, I've explained each one after the example, but in summary:
The main reason you are having issues is because you are acting on the hover over the circle-icon only - this means when you move the mouse off it (even if it is to the associated text) the hover effect ends. Therefore you need to act on hovering over the whole link, not just the circle.
Working Example:
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
a.icontextlink { text-decoration:none;}
.icontextlink:hover .circle-icon {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.icontextlink:hover .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
<div class="container">
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
Changes to make it work:
1. Add a class to the link so we can apply CSS to it and not all a elements in your container, e.g.
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i><span class="hide">HOME</span>
</a>
2. Add the animation to the circle when the whole link is hovered. We do this by changing the CSS selector from .circle-icon:hover to .icontextlink:hover .circle-icon, e.g.:
.icontextlink:hover .circle-icon { animation-name: spin; /* etc... */ }
3. Display the hide class when the whole link is hovered - this means that even if you move the mouse off the circle and onto the text, it is still part of the same link so the effect does not end. So we change the selector from .circle-icon:hover + .hide to .icontextlink:hover .hide:
.icontextlink:hover .hide { display: inline-block; /* etc... */ }
4. Hide the blue line on hover - The blue line you see is the default styling for links in the browser. We can turn this
off using text-decoration:none;, e.g.
a.icontextlink { text-decoration:none;}
5. Fix the rotation animation FYI, you don't mention it in your question but the spin animation is not working. This is because you are using e.g. rotate: 0deg;. The correct way is transform: rotate(0deg);:
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Ok so:
For the "little black line" - it's the text-decorator property of the a tag.
For the animation - the problem was that when you don't hover on the home button (since you move the cursor or whatsoever), the :hover does not apply and you back to display:none, but then the button moves to the cursor and you again hovering it (and so on till the end of times). So I just set that when you hover on the text, the display is inline-block.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.hide:hover {
display: inline-block;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
background-color: gray;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover+.hide {
display: inline-block;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 80px;
font-size: 100%;
}
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/7dd2bd858f.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
To remove the black line I did:
*{
text-decoration: none;
}
at the top of the css document
also i made the text showing up animation smoother:
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
25% {
font-size: 0%;
}
27% {
font-size: 20%;
}
100% {
width: 100px;
font-size: 100%;
}
}
I have a css-doodle animation which is basically a small, animated circle, which I would like to use as a replacement for the letter "O" in my website header (h1.) Therefore, the animation needs to be on the same line as my header, with header text on each side of it (ex: "PURPLE X M[css-doodle]SS"). I would also like to place a dashed border that wraps around the header, and ensure that the css-doodle animation still displays even when changing the width of the page. My HTML and CSS stylesheet are below:
.divheader {
display: inline-block;
position: static;
height: 200px;
width: 700px;
border: 2px dashed #000000;
}
p {
display: inline-block;
position: static;
background-color: white;
font-size: 38px;
font-color: white;
font-family: "Courier New", Courier, monospace;
}
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #0000;
}
<html lang="en">
<head>
<link href="doodletest.css" type="text/css" rel="stylesheet" />
<script src="https://unpkg.com/css-doodle#0.7.7/css-doodle.min.js">
</script>
</head>
<title>purple x moss</title>
<div class="divheader">
<p>PURPLE x M
<css-doodle> :doodle { #grid: 40x1 / 40vmin; perspective: 23vmin; } background: #multi(#r(220, 40), ( radial-gradient( #p(#00b8a9, #5f4f93, #8d7ebd, #b1a7d1) 55%, transparent 60% ) #r(100%) #r(100%) / #r(1%, 3%, .1) #lr() no-repeat )); #size: 80%; #place-cell:
center; border-radius: 50%; transform-style: preserve-3d; animation: scale-up 20s linear infinite; animation-delay: calc(#i() * -.6s); #keyframes scale-up { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 10% { opacity: 1; } 95% {
transform: translate3d(0, 0, #r(50vmin, 55vmin)) rotate(#r(-360deg, 360deg)); } 100% { opacity: 0; transform: translate3d(0, 0, 1vmin); } }
</css-doodle>SS</p>
</div>
I'm trying to create a searchlight/ spotlight effect that will highlight some text using CSS animations. Heres a fiddle.
However, my spotlight does not reach up to the top of the page and instead reveals the black background to different degrees throughout the animation.
What I'm trying to achieve looks something like this:
I was wondering if anybody had any ideas as to how to modify my spotlight to vertically fill the entire page?
h1 {
color: green;
position: absolute;
}
body {
background-color: black;
overflow: hidden;
}
.spotlight {
position: relative;
width: 10vw;
height: 0vh;
border-top: 100vh solid rgba(255, 255, 255, 0.25);
border-left: 12vw solid transparent;
border-right: 12vw solid transparent;
background-color: transparent;
-webkit-transform-origin: 50% 100% 0;
z-index: 0;
-webkit-animation: move 7s ease-in-out;
}
#-webkit-keyframes move {
0% {
-webkit-transform: rotate(-30deg) scaleX(0.4);
}
50% {
-webkit-transform: rotate(30deg) scaleX(0.4);
}
100% {
-webkit-transform: rotate(0deg);
}
}
<html>
<head></head>
<body>
<h1>
Some text
</h1>
<div class="spotlight spot1"></div>
</body>
</html>
Simply use display:absolute instead of relative and modify the code a bit ;)
h1 {
color: green;
position: absolute;
z-index: 1;
}
body {
background-color: black;
overflow: hidden;
}
.spotlight {
position: absolute;
width: 10vw;
bottom: -20px;
border-top: 140vh solid rgba(245, 245, 245, 0.493);
border-left: 12vw solid transparent;
border-right: 12vw solid transparent;
background-color: transparent;
transform-origin: 50% 100% 0;
z-index: 0;
opacity: 1;
will-change: auto;
animation: move 7s ease-in-out;
}
#keyframes move {
0% {
transform: rotate(-30deg) scaleX(0.4);
}
50% {
transform: rotate(30deg) scaleX(0.4);
}
100% {
transform: rotate(0deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>
Some text
</h1>
<div class="spotlight spot1"></div>
</body>
</html>
I have a problem with my text and "loader". I want them to be in the MIDDLE but they are centred in the top.
.loader {
margin: auto;
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);
}
}
.WebEntTxt {
color: white;
line-height: 1.5;
text-align: center;
text-decoration: none;
}
<div class="loader"></div>
<h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1>
How can I get them to be in the CENTER of the screen, NOT in the TOP?
Since you want both text and spinner in middle, add a wrapper around both of them. Then,
Just add position fixed to wrapper, if you want it to position in center of the entire window. Then bring it to the center by adding left 50% and top 50%. Then you have to offset half of its original width and height using translate transform.
#wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader {
margin: auto;
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);
}
}
.WebEntTxt {
color: red;
line-height: 1.5;
text-align: center;
text-decoration: none;
}
<body class="Background" background="Background.jpg">
<div id="wrapper">
<div class="loader"></div>
<h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
Using Flexbox here, this is best way to align element.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.loader {
margin: auto;
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
display: flex;
align-self: center;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.WebEntTxt {
color: white;
line-height: 1.5;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body class="Background" background="Background.jpg">
<div class="loader"></div>
<!-- <h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1> -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Without the need of putting any absolute values in the positioning - as other answers suggest-, you can use translate().
.loading-wrapper {
position: fixed;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
align-items: center;
transform: translate(-50%, -50%);
}
.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);
}
}
.WebEntTxt {
color: red;
line-height: 1.5;
text-align: center;
text-decoration: none;
}
<div class="loading-wrapper">
<div class="loader"></div>
<h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1>
</div>
I have the following HTML/CSS code and I have an issue to center the content inside a flex container. The result is :
In my mind, I would like to center the ring inside the flex container AND center the text (temperature) and the CSS animation (arrow) just after the temperature inside the ring animation.
How to do this?
body {
background-color: #0d74ff;
}
.container {
padding: 20px;
}
.flexwrap {
display: flex;
flex-wrap: wrap;
}
.cell {
position: relative;
height: 200px;
width: 200px;
border: 1px solid rgba(0, 0, 0, 0.25);
}
.loader-ring {
width: 150px;
height: 150px;
}
.loader-ring-light {
width: 150px;
height: 150px;
border-radius: 150px;
box-shadow: 0 4px 0 #ffffff inset;
animation: rotate-360 6s linear infinite;
}
.loader-text {
font-weight: bold;
font-size: 2em;
}
.scroll-down {
border: 2px solid #fff;
border-radius: 100px;
width: 30px;
height: 30px;
}
.scroll-down i {
display: block;
border-radius: 100px;
transition: all 0.4s ease;
width: 100%;
height: 100%;
background-size: 0 auto;
animation: pulse 1.5s 0s infinite normal ease forwards;
background-image: url("https://jamesmuspratt.com/codepen/img/arrow-down.svg");
background-repeat: no-repeat;
}
#keyframes rotate-360 {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes pulse {
0% {
opacity: 0;
background-position: center top;
background-size: 0 auto;
}
10% {
opacity: 0;
}
50% {
opacity: 1;
background-size: 75% auto;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
background-position: center bottom;
background-size: 0 auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="container">
<div class="flexwrap">
<div class="cell">
<div class='loader-ring'>
<div class='loader-ring-light'></div>
<div class='loader-ring-track'>
<div class='loader-text'>26.6°</div>
<div class="scroll-down"><i></i></div>
</div>
</div>
</div>
</div>
</div>
You don't need so many blocks here. You need absolute positioning because elements will need to stack on each other. Also for centering absolutely positioned elements you need this styles
.loader-ring,
.loader-ring-track {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Demo:
body {
background-color: #0d74ff;
}
.container {
padding: 20px;
}
.cell {
position: relative;
height: 200px;
width: 200px;
border: 1px solid rgba(0, 0, 0, 0.25);
}
/* center absolutely positioned items */
/* both vertically and horizontally */
.loader-ring,
.loader-ring-track {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader-ring-track {
display: flex; /* new */
}
.loader-ring {
width: 150px;
height: 150px;
}
.loader-ring-light {
width: 150px;
height: 150px;
border-radius: 150px;
box-shadow: 0 4px 0 #ffffff inset;
animation: rotate-360 6s linear infinite;
}
.loader-text {
font-weight: bold;
font-size: 2em;
}
.scroll-down {
border: 2px solid #fff;
border-radius: 100px;
width: 30px;
height: 30px;
}
.scroll-down i {
display: block;
border-radius: 100px;
transition: all 0.4s ease;
width: 100%;
height: 100%;
background-size: 0 auto;
animation: pulse 1.5s 0s infinite normal ease forwards;
background-image: url("https://jamesmuspratt.com/codepen/img/arrow-down.svg");
background-repeat: no-repeat;
}
#keyframes rotate-360 {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes pulse {
0% {
opacity: 0;
background-position: center top;
background-size: 0 auto;
}
10% {
opacity: 0;
}
50% {
opacity: 1;
background-size: 75% auto;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
background-position: center bottom;
background-size: 0 auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="cell">
<div class='loader-ring'>
<div class='loader-ring-light'></div>
<div class='loader-ring-track'>
<div class='loader-text'>26.6°</div>
<div class="scroll-down"><i></i></div>
</div>
</div>
</div>