Is there any way to add line spinner (from spin.js - https://spin.js.org) using plain css animation without using javascript (example: https://www.w3schools.com/howto/howto_css_loader.asp)?
Yes, you can, thanks for this article: click to see
For simpliest understanding, here is code snippet:
/**
* (C)Leanest CSS spinner ever
*/
#keyframes spin {
to { transform: rotate(1turn); }
}
.progress {
position: relative;
display: inline-block;
width: 5em;
height: 5em;
margin: 0 .5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
animation: spin 1s infinite steps(8);
}
.small.progress {
font-size: 6px;
}
.large.progress {
font-size: 24px;
}
.progress:before,
.progress:after,
.progress > div:before,
.progress > div:after {
content: '';
position: absolute;
top: 0;
left: 2.25em; /* (container width - part width)/2 */
width: .5em;
height: 1.5em;
border-radius: .2em;
background: #eee;
box-shadow: 0 3.5em #eee; /* container height - part height */
transform-origin: 50% 2.5em; /* container height / 2 */
}
.progress:before {
background: #555;
}
.progress:after {
transform: rotate(-45deg);
background: #777;
}
.progress > div:before {
transform: rotate(-90deg);
background: #999;
}
.progress > div:after {
transform: rotate(-135deg);
background: #bbb;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>How To Create A Loader</h2>
<div class="progress"><div>Loading…</div></div>
</body>
</html>
And jsFiddle
Related
I'm trying to make line moving infinitely but the problem that the line back for another loop late.. I want it to be in the left immediately when the line off screen
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #222;
color: #fff;
}
.navbar{
padding: 2rem;
position: relative;
}
.navbar span{
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100px;
background-color: #fff;
animation: animate 6s linear infinite;
}
#keyframes animate {
0%{
left: -100%;
}
50%,100%{
left: 100%;
}
}
<nav class="navbar">
<span></span>
</nav>
You can use a combination of positioning in relation to the parent - left property - and relative positioning (relative to the width of the line itself) - transform: translateX property.
So the line starts at minus its own width and ends at the width of the parent (as you have now) with no translation.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #222;
color: #fff;
}
.navbar {
padding: 2rem;
position: relative;
overflow: hidden;
}
.navbar span {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100px;
background-color: #fff;
animation: animate 6s linear infinite;
}
#keyframes animate {
0% {
left: 0;
transform: translate(-100%);
}
100% {
left: 100%;
transform: translate(0);
}
}
<nav class="navbar">
<span></span>
</nav>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #222;
color: #fff;
}
.navbar{
padding: 2rem;
position: relative;
width: 100%;
animation: animate 6s linear infinite;
}
.navbar span{
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100px;
background-color: #fff;
}
#keyframes animate {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
</style>
</head>
<body>
<nav class="navbar">
<span></span>
</nav>
</body>
</html>
So I'm going to explain what I did here. It's a combination of Keyframes and the transform - translate in CSS. Now, if you used animation alone to try to move from left to left, you'll notice a default delay from the end of one keyframe to the other, especially since you're not moving along the corners of the .navbar box (topleft-topright-bottomright-bottom-left and repeat). Using the animation-delay property will not solve it either. There are two options, using CSS Flex-box property and using Transforms. Since you are working with keyframes, I made use of the transforms-translate property.
The issue with transform - translate, is that translate will move the element with respect to the width of itself. Hence, having the animation within .navbar span and setting translate for keyframe 100% will only move the element to the end of the width of the element which in this case is 100px. To go around this, we will set the animation property to the parent box itself and translate the child from 0% to 100%.
I created a call-to-action button that makes a small animation on click:
Static and showing ADD TO CART
On click: Background animation (duration 1sec) and content = 'Adding to cart'
After 1sec: New background colour and showing ADDED TO CART Go to Cart
Button template:
Basically, I used the ::after to change the background colour as a progress bar and ::before to the content to ADDING TO CART.
All works perfect BUT the text ADDING TO CART is blurry on the mobile version.
Print on the desktop and mobile:
The relevant code:
changeBtn() {
addCartEl.classList.add('global__main-btn--active');
addCartEl.innerHTML = "Added to cart<span>Go to cart</span>"
}
$('#add-to-cart').on('click', changeBtn());
#keyframes adding {
0% {
width: 0%;
opacity: 1;
}
99% {
width: 99%;
opacity: 1;
}
100% {
width: 100%;
opacity: 0;
}
}
#keyframes txt-adding {
0% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes added {
0% {
color: transparent;
background-color: #6abf58;
}
100% {
color: #b4dfab;
background-color: #3f7634;
}
}
.global__main-btn {
font-size: 20pt;
font-weight: 700;
text-transform: uppercase;
color: white;
background-color: green;
padding: 1rem 5rem;
width: 100%;
border-radius: 0.5rem;
border: 1px solid green;
border-bottom: 4px solid green;
margin-bottom: 0.5rem;
max-width: 450px;
}
.global__main-btn::before {
content: "";
background-color: white;
mask-image: url("../assets/svg/cart-plus-solid.svg");
position: relative;
float: left;
width: 30px;
height: 27px;
}
.global__main-btn:hover {
box-shadow: inset 0 0 4rem green;
cursor: pointer;
}
.global__main-btn--active {
border: none;
padding: 0.6rem 5rem;
position: relative;
color: transparent;
animation: added 0.2s 0.8s normal linear forwards;
min-height: 66px;
}
.global__main-btn--active span {
display: block;
font-weight: 300;
font-size: 12pt;
}
.global__main-btn--active:hover {
box-shadow: inset 0 0 4rem green;
}
.global__main-btn--active::before {
content: "";
width: 100%;
height: 100%;
background-color: green;
border-radius: 0.5rem;
position: absolute;
top: 0;
left: 0;
mask-image: none;
animation: adding 1s normal linear forwards;
}
.global__main-btn--active::after {
content: "Adding to cart";
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
color: white;
animation: txt-adding 1s normal linear forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" class="buy__btn global__main-btn" id="add-to-cart">Add to cart</button>
I had a similar issue and figured it has to do with the transform property. As soon as i added a transformation, the text got blurry. Removing it will solve the problem. This seems to be a webkit or blink engine bug.
So I have five different coded pages. What I want to do is combine them all into one html page. I have my home page with a navigation bar that links to the other pages but whenever I try to insert my other pages, the multiple pages overlay one another or appear in a column underneath. What sort of code do I need so the clickable links pull up my other pages without it overlaying. Below is a section of my code that I want linked to another page.
}
.container {
position: relative;
width: 50%;
float: left;
}
.image1 {
display: inline-block;
width: 400px;
height: 290px;
margin-top: -10px;
margin-right: 400px;
background-position: 10px 280px;
}
.overlay {
position: absolute;
top: -10px;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 400px;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0);
z-index: -3.0;
}
.container:hover .overlay {
background-color: rgba(0, 0, 0, .7);
height: 290px;
width: 400px;
}
.container:hover .text {
opacity: 1;
}
.text {
font-size: 50px;
position: relative;
width: 330px;
height: 240px;
overflow: scroll;
top: 15%;
left: 48%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
text-align: center;
margin-top: 100px;
display:block;
width:150px;
height: 70px;
border:2px solid #C5E3ED;
color:#ADD7C9;
text-align:center;
text-decoration:none;
}
a { text-decoration: none; color:#C5E3ED }
a:visited { text-decoration: none; color:#C5E3ED; }
a:hover { text-decoration: none; color:#C5E3ED; }
a:focus { text-decoration: none; color:#C5E3ED; }
a:hover, a:active { text-decoration: none; color:#C5E3ED }
<div class="container">
<img src="https://www.pets4homes.co.uk/images/articles/3779/large/how-to-care-for-a-dog-with-a-stomach-upset-58345cd2daf98.jpg" alt="dog" class="image1">
<div class="overlay">
<div class="text">
About
</div>
</div>
</div>
I have used this guide to create a collapsible frame for you.
https://www.w3schools.com/howto/howto_js_collapsible.asp
You can add your html code in div with class="content". Let me know if it is what you wanted.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<button class="collapsible">Open Collapsible</button>
<div class="content">
!--- YOUR HTML CODE HERE ---!
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>
the navigation works fine until a specific width (about 1100px). If the width gets smaller the links are not clickable anymore. And I don't know why. The only thing I found out, is that, when I add some text (for example in line 51 "mediaquery..."), than the navigation works, but the backgroundcolor of it become white instead of original dark grey.
Do you know what I am doing wrong?
Here is the code:
<html lang="de">
<head>
<meta charset="utf -8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<!--The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!--[if lt IE 8]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Arbeitsgruppe Wolken und globales Klima - Universität Leipzig (Fakultät für Physik und Geowissenschaften)</title>
<style>
*{
font-family: helvetica,arial,sans-serif;
}
#media (max-width: 1300px) and (min-width: 0px) {
#luecke_nav1 {
display: none;
}
}
#media (max-width: 1029px) {
.heading #seitentitel h1 {
font-size: 140%;
}
}
#media (min-width: 1029px) {
.menu {
font-size: 1.2em;
}
}
mediaqueryzerhautklassedanach
.menu {
padding: 0.5em;
background: #414141;
min-height: 3em;
line-height: 1em;
position: fixed;
top: 0;
left: 0;
z-index: -6;
}
.menu > ul {
transition: max-height 0.25s linear;
}
.menu ul {
margin: 0;
padding: 0;
text-align: center;
}
.menu li {
transition: visibility .25s linear;
display: inline-block;
padding: .45em 1.1em;
margin: 0 .3em;
position: relative;
}
#media (min-width: 841px) {
.menu li ul {
display: none;
position: absolute;
top: 100%;
margin-top: 1px;
left: -1px;
right: -1px;
}
.menu li:hover ul {
display: block;
}
.menu li li {
margin: -1px 0 0 0;
box-sizing: border-box;
width: 100%;
}
#logo {
display: none;
}
}
#media (max-width: 841px) {
#nav_kasten {
display: none;
}
.hvr-bounce-in{
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
#luecke_nav{
display: none;
}
.menu > ul {
max-height: 0;
overflow: hidden;
margin: 0 3.5em 0 1em;
}
.menu li {
visibility: hidden;
display: block;
padding: 0.5em 0.6em;
border: none;
}
.menu li ul {
margin-top: 0.5em;
border-left: 1px solid #000;
}
.menu .navbar-handle {
display: block;
}
#navbar-checkbox:checked + .menu ul {
max-height: 300px;
}
#navbar-checkbox:checked + .menu li {
visibility: visible;
}
#navbar-checkbox:checked + .menu .navbar-handle,
#navbar-checkbox:checked + .menu .navbar-handle:after,
#navbar-checkbox:checked + .menu .navbar-handle:before {
border-color: #2098d1;
}
}
.navbar-checkbox {
display: none;
}
.navbar-handle {
display: none;
cursor: pointer;
position: relative;
font-size: 45px;
padding: .5em 0;
height: 0;
width: 1.66666667em;
border-top: 0.13333333em solid;
color: #2098d1;
}
.navbar-handle:before,
.navbar-handle:after {
position: absolute;
left: 0;
right: 0;
content: ' ';
border-top: 0.13333333em solid;
}
.navbar-handle:before {
top: 0.37777778em;
}
.navbar-handle:after {
top: 0.88888889em;
}
.menu {
top: 0;
left: 0;
right: 0;
}
.menu .navbar-handle {
position: fixed;
font-size: 1.2em;
top: 0.7em;
right: 12px;
z-index: 10;
}
/* Overline From Center */
.hvr-overline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-overline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
background: #2098d1;
height: 7px;
top: -20%;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before {
left: 0;
right: 0;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #2098d1;
}
a:hover {
text-decoration: none;
color: #2098d1;
}
#lim_logo {
width: 50%;
margin-top: 8%;
text-align: center;
z-index: 99;
}
#nav_kasten {
width: 14.7%;
height: 40%;
z-index: 99;
position: absolute;
top: 0;
margin-left: 42%;
}
#base {
position: relative;
display: inline-block;
width: 100%;
text-align: center;
color: white;
background: gray;
text-decoration: none;
padding-bottom:15%;
background-clip:content-box;
overflow:hidden;
}
#base:after {
content: "";
position: absolute;
top:83%;
left: 0;
background-color:inherit;
padding-bottom:50%; width:57.7%;
z-index: -1;
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
.hvr-bounce-in {
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
}
#logo{
width: 15%;
top: 2%;
left: 1%;
z-index: 4;
position: fixed;
}
.heading {
background: url(https://pixabay.com/static/uploads/photo/2012/10/26/01/38/cold-front-63037_960_720.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
z-index:-7;
padding: 18%;
}
#seitentitel {
background-color:rgba(255,255,255,0.7);
text-align: center;
padding: 2%;
margin: 0.5%;
}
.linie {
border :none;
border-top: 1px solid #0090E0;
background-color:#FFFFFF;
height: 1px;
margin: 0px 80px 0px 80px;
}
</style>
</head>
<body>
<header>
<div id="nav_kasten">
<img id="lim_logo" src="http://www.uni-leipzig.de/~strahlen/web/images/LOGOLIM_trans_white.gif">
</div>
<div id="logo">
<img id="lim_logo" src="http://www.uni-leipzig.de/~strahlen/web/images/LOGOLIM_trans_white.gif">
</div>
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu">
<ul>
<li>Home</li>
<li>Team</li>
<li>Veröffentlichungen</li>
<li id="luecke_nav"><div id="luecke_nav1"> </div>
<div id="luecke_nav2"> </div></li>
<li>Projekte</li>
<li>Abschlussarbeiten</li>
<li>Links</li>
</ul>
<label for="navbar-checkbox" class="navbar-handle hvr-bounce-in">
</nav>
</header>
<div class="col-md-12 heading">
<div id="seitentitel">
<hr class="linie">
<h1> Arbeitsgruppe <br> Wolken und globales Klima</h1>
<hr class="linie">
</div>
</div>
<div class="col-md-12 text2">
<h2 style="text-align: center;"></h2>
<br>
<div class="col-md-6">
</div>
<div class="col-md-12">
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
</script>
</body>
So all adding that text does is essentially stop the browser from rendering the rest of the css that follows. What you need to do is;
1) Remove that text you've added in the css.
2) Remove the z-index on both the .menu and .heading. This is the problem. You've applied a lower z-index to the .heading but because it exists in the html at a higher stacking order than the .menu, it isn't working as you've intended it. So .heading is hiding your .menu
That should fix your problem.
Also i noticed:
a) You used a duplicate id on your logo image. #lim_logo use a class instead and then undate your css accordingly.
b) Just before your closing </nav> you are missing a closing </label> tag.
c) Update your media query expressions. Max-width should (in most cases) stop below the breakpoint. for example you might have a breakpoint at 1300px, so the max-width for targeting below that breakpoint would be 1299px. and then the min-width for targeting from that breakpoint and up would be 1300px. And there's no point including the min-width:0px as that would be implied.
This is kind of embarassing for me, but I have a final project for my Software engineering class, and I'd been searching for tutorials so I can see and learn about html css and javascript to implement it in my project. I never worked on those, so I found a cool tutorial about some animation that I wanted to implement in my project so I decided to give it a try, and I cant get the code to work.
Here's the tutorial link.
http://davidwalsh.name/logo-animation
Here's my code (http://jsfiddle.net/5x4wv/):
<!DOCTYPE html>
<html>
<head>
<body>
<div class="mike">
<div class="head">
<div class="eyes">
<div class="eye">
<div class="pupil"></div>
</div>
<div class="eye">
<div class="pupil"></div>
</div>
</div>
<div class="nose">
<div class="ball"></div>
<div class="ball"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<style>
div {
border-radius: 50%;
box-sizing: border-box;
}
.mike {
width: 400px;
margin: 0 auto;
padding-top: 2%;
transition: all 1s;
}
.mike:hover {
transform: scale(1.5) rotate(360deg);
}
.head {
width: 195px;
height: 120px;
background: #92ae57;
position: relative;
z-index: 1;
margin-left: 103px;
}
.eyes {
width:200px;
position: absolute;
bottom: 45px;
}
.eye {
width: 95px;
height: 93px;
background-color: #ffe13b;
border: 10px solid #92ae57;
display: inline-block;
z-index: 2;
animation: eyes 5s infinite step-start 0s;
}
.eye:last-child {
float:right;
}
.pupil {
width: 1px;
height: 1px;
border: 10px solid #353535;
display: inline-block;
position: absolute;
top: 38px;
margin-left:27px;
z-index: 3;
animation: pupil 5s infinite step-start 0s;
}
.pupil:last-child{
float:right;
}
.ball {
width: 1px;
height: 1px;
border: 5px solid #6f8346;
position: absolute;
top: 70px;
left: 88px;
}
.ball:last-child {
float:left;
margin-left: 14px;
}
.mouth {
height: 100px;
width: 180px;
border-bottom: 4px solid #6f8346;
position: relative;
top: 8px;
left: 7px;
}
/* Animations */
#keyframes eyes {
0%, 100% {
background: #92ae57;
border-radius: 50%;
border: 10px solid #92ae57;
}
5%, 95% {
background:#ffe13b;
border-radius: 50%;
border: 10px solid #92ae57;
}
}
#keyframes pupil {
0%, 100% {
opacity: 0;
}
5%, 95% {
opacity: 1;
}
}
</style>
</body>
</html>
I'm using Sublimetext 2 and running in Chrome.
Prefix stuff...
Delay duration only delays animation at first start not at every iteration.
USE FLOATS BARELY...use relative position especially for this..
http://jsfiddle.net/T862G/ take a look it works
#-webkit-keyframes eyes {
10% {background-color:#92ae57;}
25% {background-color:#ffe13b;}
}
#-webkit-keyframes pupil {
10% {opacity: 0;}
25% {opacity: 1;}
}
.mike:hover {
-webkit-transform: rotate(360deg) scale(1.5);
}