Develop Reference

How can i create a dynamic progress bar

I am trying to create a progress bar which looks like the first image above but end up getting the second image as a result.
I am using html, CSS and JavaScript. where did I get it wrong? Or is there something I am missing out?
the black dots are not really that important to me as I am interested in the shape of the progress bar
const numb = document.querySelector(".number");
let counter = 0;
setInterval(() => {
if(counter == 65 ){
clearInterval();
}else{
counter+=1;
numb.textContent = counter + "%";
}
}, 80);
*{
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
html, body{
display:grid;
height:100%;
text-align: center;
place-items: center;
background: #dde6f0;
}
.circular{
height:120px;
width: 120px;
position: relative;
transform:scale(2);
}
.circular .inner{
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background: #dde6f0;
border-radius: 100%;
}
.circular .number{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:10;
font-size:18px;
font-weight:500;
color:#4158d0;
}
.circular .bar{
position: absolute;
height: 100%;
width: 100%;
background: #fff;
-webkit-border-radius: 100%;
clip: rect(0px, 120px, 120px, 70px);
}
.circle .bar .progress{
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 70px, 120px, 0px);
background: #FF6600;
}
.circle .left .progress{
z-index:1;
animation: left 4s linear both;
}
#keyframes left{
100%{
transform: rotate(180deg);
}
}
.circle .right {
transform: rotate(180deg);
z-index:3;
}
.circle .right .progress{
animation: right 4s linear both;
animation-delay:4s;
}
#keyframes right{
100%{
transform: rotate(180deg);
}
}
<div class="circular">
<div class="inner"></div>
<div class="number">100%</div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>

I fiddled with it until it worked.
Changed the clip on .circular .bar and .circle .bar .progress to
clip: rect(0px, 120px, 120px, 60px); and respectively clip: rect(0px, 60px, 120px, 0);
const numb = document.querySelector(".number");
let counter = 0;
setInterval(() => {
if(counter == 65 ){
clearInterval();
}else{
counter+=1;
numb.textContent = counter + "%";
}
}, 80);
*{
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
html, body{
display:grid;
height:100%;
text-align: center;
place-items: center;
background: #dde6f0;
}
.circular{
height:120px;
width: 120px;
position: relative;
transform:scale(2);
}
.circular .inner{
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background: #dde6f0;
border-radius: 100%;
}
.circular .number{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:10;
font-size:18px;
font-weight:500;
color:#4158d0;
}
.circular .bar{
position: absolute;
height: 100%;
width: 100%;
background: #fff;
-webkit-border-radius: 100%;
clip: rect(0px, 120px, 120px, 60px);
}
.circle .bar .progress{
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 60px, 120px, 0);
background: #FF6600;
}
.circle .left .progress{
z-index:1;
animation: left 4s linear both;
}
#keyframes left{
100%{
transform: rotate(180deg);
}
}
.circle .right {
transform: rotate(180deg);
z-index:3;
}
.circle .right .progress{
animation: right 4s linear both;
animation-delay:4s;
}
#keyframes right{
100%{
transform: rotate(180deg);
}
}
<div class="circular">
<div class="inner"></div>
<div class="number">100%</div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>

How can I implement this loader for my project?

Basically, I am trying to implement a loader for my clock project. However, for some reason, it does not work. I have tried moving my code around to see what's wrong, but I have not figured it out. However, if I remove the div that my clock is in, the loader appears and fades out which is what I want it to do. How can I produce my loader so it appears, fades out, and shows the clock? Any help is appreciated. Here is my code below.
setInterval(setClock, 1000)
const hourHand = document.querySelector('[data-hour-hand]')
const minuteHand = document.querySelector('[data-minute-hand]')
const secondHand = document.querySelector('[data-second-hand]')
function setClock() {
const currentDate = new Date()
const secondsRatio = currentDate.getSeconds() / 60
const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60
const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
setRotation(secondHand, secondsRatio)
setRotation(minuteHand, minutesRatio)
setRotation(hourHand, hoursRatio)
}
function setRotation(element, rotationRatio){
element.style.setProperty('--rotation', rotationRatio * 360)
}
setClock()
.loader-wrap{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #292929;
overflow: hidden;
}
.loader-circles{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transform: rotate(45deg);
width: 200px;
height: 200px;
}
.loader-circles .circle{
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: transparent;
border: 4px solid #fff;
border-radius: 50%;
border-bottom-color: transparent;
border-right-color: transparent;
text-align: center;
}
.loader-circles .circle:nth-child(even){
border-color: #42CAFD;
border-bottom-color: transparent;
border-right-color: transparent;
}
.loader-circles .circle:nth-child(odd){
border-color: #EFD2CB;
border-bottom-color: transparent;
border-right-color: transparent;
}
.loader-circles .circle:nth-child(1){
width: 20px;
height: 20px;
animation: rotate-circle linear infinite;
animation-duration: 12s;
}
.loader-circles .circle:nth-child(2) {
width: 40px;
height: 40px;
animation: rotate-circle linear infinite;
animation-duration: 6s;
}
.loader-circles .circle:nth-child(3) {
width: 60px;
height: 60px;
animation: rotate-circle linear infinite;
animation-duration: 4s;
}
.loader-circles .circle:nth-child(4) {
width: 80px;
height: 80px;
animation: rotate-circle linear infinite;
animation-duration: 3s;
}
.loader-circles .circle:nth-child(5) {
width: 100px;
height: 100px;
animation: rotate-circle linear infinite;
animation-duration: 2.4s;
}
.loader-circles .circle:nth-child(6) {
width: 120px;
height: 120px;
animation: rotate-circle linear infinite;
animation-duration: 2s;
}
.loader-circles .circle:nth-child(7) {
width: 140px;
height: 140px;
animation: rotate-circle linear infinite;
animation-duration: 1.7142857143s;
}
.loader-circles .circle:nth-child(8) {
width: 160px;
height: 160px;
animation: rotate-circle linear infinite;
animation-duration: 1.5s;
}
.loader-circles .circle:nth-child(9) {
width: 180px;
height: 180px;
animation: rotate-circle linear infinite;
animation-duration: 1.3333333333s;
}
.loader-circles .circle:nth-child(10) {
width: 200px;
height: 200px;
animation: rotate-circle linear infinite;
animation-duration: 1.2s;
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
* {
margin: 0;
padding: 0;
}
.clock {
width: 300px;
height: 300px;
background-color: rgba(255, 255, 255, .8);
border-radius: 50%;
border: 2px solid black;
position: relative;
}
.clock .number{
--rotation: 0;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform: rotate(var(--rotation));
font-size: 1.5rem;
}
.clock .number1 { --rotation: 30deg;}
.clock .number2 { --rotation: 60deg;}
.clock .number3 { --rotation: 90deg;}
.clock .number4 { --rotation: 120deg;}
.clock .number5 { --rotation: 150deg;}
.clock .number6 { --rotation: 180deg;}
.clock .number7 { --rotation: 210deg;}
.clock .number8 { --rotation: 240deg;}
.clock .number9 { --rotation: 270deg;}
.clock .number10 { --rotation: 300deg;}
.clock .number11 { --rotation: 330deg;}
.clock .hand{
--rotation: 0;
position: absolute;
bottom: 50%;
left: 50%;
background-color: black;
border: 1px solid white;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
transform-origin: bottom;
z-index: 10;
transform: translate(-50%) rotate(calc(var(--rotation) * 1deg));
}
.clock::after{
content: " ";
position: absolute;
background-color: black;
z-index: 11;
width: 15px;
height: 15px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.clock .hand.second{
width: 3px;
height: 45%;
background-color: red;
}
.clock .hand.minute{
width: 7px;
height: 40%;
background-color: black;
}
.clock .hand.hour{
width: 10px;
height: 35%;
background-color: black;
}
body {
background-color: cornflowerblue;
text-align: center;
overflow-x: hidden;
}
.section {
min-height: 820px;
position: relative;
text-align: center;
font-family: sans-serif, arial;
margin: 0;
}
h1, p {
margin: 0;
font-family: sans-serif, arial;
font-weight: bold;
}
.title-top {
font-size: 60px;
padding-bottom: 30px;
}
.title-bottom {
font-size: 30px;
}
.title-tx {
font-size: 20px;
opacity: 0.8;
}
/* Navbar */
.nav {
position: fixed;
width: 100%;
top: 20px;
z-index: 9;
padding-left: 10px;
}
.nav a {
padding: 7px 20px;
border-radius: 50px;
margin-right: 10px;
float: left;
border-style: ridge;
background: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
text-decoration: none;
color: black;
font-family: sans-serif, arial;
font-weight: 100;
}
.nav a.active {
background: rgba(0, 0, 0, 0.5);
color: white;
}
.nav a:hover {
background: rgba(250, 164, 84, 0.795);
color: white;
}
/* Sections */
#section1{
background: linear-gradient(to right, #1e5799 0%, #2ce0bf 20%, #76dd2c 40%, #dba62b 60%, #e02cbf 80%, #1e5799 100%);
background-size: 10000px 100%;
animation: bg 15s linear infinite;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
font-family: 'Audiowide', cursive;
}
#keyframes bg {
0% {
background-position-x: 0;
}
100% {
background-position-x: 10000px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Animations Page HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--Links and Fonts-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.4.1.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript Clock</title>
<script defer src="script.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="loader-wrap">
<div class="loader-circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<!--Navbar-->
<div class="nav">
<nav>
<a class="active" href="#section1">Section 1</a>
</nav>
</div>
<!--Lesson 1-->
<div class="section" id="section1">
<div class = "clock">
<div class = "hand hour" data-hour-hand></div>
<div class = "hand minute" data-minute-hand></div>
<div class = "hand second" data-second-hand></div>
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
</div>
</div>
<script>
setTimeout(function(){
$('.loader-wrap').fadeToggle();
}, 2500);
</script>
</body>
</html>

You only need to add Z-index to the parent container of either the Clock or the loader:
Here I add a z-index on the container of the clock:
#section1{
z-index: -1;
}
So the loader and your clock are overlapping on one another and the clock has higher priority in terms of your HTML which is below the loader HTML-markup and that is why the clock shows on top of the Loader.
setInterval(setClock, 1000)
const hourHand = document.querySelector('[data-hour-hand]')
const minuteHand = document.querySelector('[data-minute-hand]')
const secondHand = document.querySelector('[data-second-hand]')
function setClock() {
const currentDate = new Date()
const secondsRatio = currentDate.getSeconds() / 60
const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60
const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
setRotation(secondHand, secondsRatio)
setRotation(minuteHand, minutesRatio)
setRotation(hourHand, hoursRatio)
}
function setRotation(element, rotationRatio){
element.style.setProperty('--rotation', rotationRatio * 360)
}
setClock()
.loader-wrap{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #292929;
overflow: hidden;
}
.loader-circles{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transform: rotate(45deg);
width: 200px;
height: 200px;
}
.loader-circles .circle{
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: transparent;
border: 4px solid #fff;
border-radius: 50%;
border-bottom-color: transparent;
border-right-color: transparent;
text-align: center;
}
.loader-circles .circle:nth-child(even){
border-color: #42CAFD;
border-bottom-color: transparent;
border-right-color: transparent;
}
.loader-circles .circle:nth-child(odd){
border-color: #EFD2CB;
border-bottom-color: transparent;
border-right-color: transparent;
}
.loader-circles .circle:nth-child(1){
width: 20px;
height: 20px;
animation: rotate-circle linear infinite;
animation-duration: 12s;
}
.loader-circles .circle:nth-child(2) {
width: 40px;
height: 40px;
animation: rotate-circle linear infinite;
animation-duration: 6s;
}
.loader-circles .circle:nth-child(3) {
width: 60px;
height: 60px;
animation: rotate-circle linear infinite;
animation-duration: 4s;
}
.loader-circles .circle:nth-child(4) {
width: 80px;
height: 80px;
animation: rotate-circle linear infinite;
animation-duration: 3s;
}
.loader-circles .circle:nth-child(5) {
width: 100px;
height: 100px;
animation: rotate-circle linear infinite;
animation-duration: 2.4s;
}
.loader-circles .circle:nth-child(6) {
width: 120px;
height: 120px;
animation: rotate-circle linear infinite;
animation-duration: 2s;
}
.loader-circles .circle:nth-child(7) {
width: 140px;
height: 140px;
animation: rotate-circle linear infinite;
animation-duration: 1.7142857143s;
}
.loader-circles .circle:nth-child(8) {
width: 160px;
height: 160px;
animation: rotate-circle linear infinite;
animation-duration: 1.5s;
}
.loader-circles .circle:nth-child(9) {
width: 180px;
height: 180px;
animation: rotate-circle linear infinite;
animation-duration: 1.3333333333s;
}
.loader-circles .circle:nth-child(10) {
width: 200px;
height: 200px;
animation: rotate-circle linear infinite;
animation-duration: 1.2s;
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
* {
margin: 0;
padding: 0;
}
.clock {
width: 300px;
height: 300px;
background-color: rgba(255, 255, 255, .8);
border-radius: 50%;
border: 2px solid black;
position: relative;
}
.clock .number{
--rotation: 0;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform: rotate(var(--rotation));
font-size: 1.5rem;
}
.clock .number1 { --rotation: 30deg;}
.clock .number2 { --rotation: 60deg;}
.clock .number3 { --rotation: 90deg;}
.clock .number4 { --rotation: 120deg;}
.clock .number5 { --rotation: 150deg;}
.clock .number6 { --rotation: 180deg;}
.clock .number7 { --rotation: 210deg;}
.clock .number8 { --rotation: 240deg;}
.clock .number9 { --rotation: 270deg;}
.clock .number10 { --rotation: 300deg;}
.clock .number11 { --rotation: 330deg;}
.clock .hand{
--rotation: 0;
position: absolute;
bottom: 50%;
left: 50%;
background-color: black;
border: 1px solid white;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
transform-origin: bottom;
z-index: 10;
transform: translate(-50%) rotate(calc(var(--rotation) * 1deg));
}
.clock::after{
content: " ";
position: absolute;
background-color: black;
z-index: 11;
width: 15px;
height: 15px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.clock .hand.second{
width: 3px;
height: 45%;
background-color: red;
}
.clock .hand.minute{
width: 7px;
height: 40%;
background-color: black;
}
.clock .hand.hour{
width: 10px;
height: 35%;
background-color: black;
}
body {
background-color: cornflowerblue;
text-align: center;
overflow-x: hidden;
}
.section {
min-height: 820px;
position: relative;
text-align: center;
font-family: sans-serif, arial;
margin: 0;
}
h1, p {
margin: 0;
font-family: sans-serif, arial;
font-weight: bold;
}
.title-top {
font-size: 60px;
padding-bottom: 30px;
}
.title-bottom {
font-size: 30px;
}
.title-tx {
font-size: 20px;
opacity: 0.8;
}
/* Navbar */
.nav {
position: fixed;
width: 100%;
top: 20px;
z-index: 9;
padding-left: 10px;
}
.nav a {
padding: 7px 20px;
border-radius: 50px;
margin-right: 10px;
float: left;
border-style: ridge;
background: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
text-decoration: none;
color: black;
font-family: sans-serif, arial;
font-weight: 100;
}
.nav a.active {
background: rgba(0, 0, 0, 0.5);
color: white;
}
.nav a:hover {
background: rgba(250, 164, 84, 0.795);
color: white;
}
/* Sections */
#section1{
background: linear-gradient(to right, #1e5799 0%, #2ce0bf 20%, #76dd2c 40%, #dba62b 60%, #e02cbf 80%, #1e5799 100%);
background-size: 10000px 100%;
animation: bg 15s linear infinite;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
font-family: 'Audiowide', cursive;
z-index: -1; /* ADDED THIS LINE OF CSS */
}
#keyframes bg {
0% {
background-position-x: 0;
}
100% {
background-position-x: 10000px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Animations Page HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--Links and Fonts-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.4.1.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript Clock</title>
<script defer src="script.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="loader-wrap">
<div class="loader-circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<!--Navbar-->
<div class="nav">
<nav>
<a class="active" href="#section1">Section 1</a>
</nav>
</div>
<!--Lesson 1-->
<div class="section" id="section1">
<div class = "clock">
<div class = "hand hour" data-hour-hand></div>
<div class = "hand minute" data-minute-hand></div>
<div class = "hand second" data-second-hand></div>
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
</div>
</div>
<script>
setTimeout(function(){
$('.loader-wrap').fadeToggle();
}, 2500);
</script>
</body>
</html>

SVG/CSS animated icon not working

I'm trying to implement an animated menu icon I found on codepen by Balaj Marius. The design is here.
When I try it in my project (or even independently in separate files), it doesn't work. The icon appears, but the javascript doesn't seem to be running. I'm assuming it's an obvious answer, but it's currently beating me. Any ideas on how to get it up and running?
Here is how I have it:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/javascript" href="js/main.js">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="content">
<h2>Scroll to see the magic.</h2>
<div class="header__fake">
<div class="icn__wrap">
<i class="icn__hamburger"></i>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
<circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
</svg>
</div>
<i class="btm__border"></i>
</div>
<h1>Tah-da!<span>Now scroll back up.</span></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
css:
body {
background: #02021a url("https://raw.githubusercontent.com/balajmarius/hamburger-animation/master/assets/img/bg.jpg") no-repeat 0 0;
-webkit-background-size: 100% auto;
background-size: 100% auto;
color: #fff;
font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
font-weight:lighter;
letter-spacing:1px;
}
.content {
width: 320px;
position: relative;
margin: 0 auto;
}
.content h2 {
margin: 35px 0 0;
}
.content h1 {
text-align: center;
margin: 1000px 0 200px;
}
.content h1 span {
display: block;
width: 100%;
margin: 5px 0 0;
opacity: .5;
}
.content .header__fake {
position: fixed;
top: 15px;
left: 50%;
margin-left: -160px;
width: 320px;
}
.content .header__fake i {
display: block;
}
.content .header__fake .btm__border {
height: 1px;
background: #fff;
position: absolute;
bottom: 6px;
left: 0;
right: 0;
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
.content .header__fake .icn__wrap {
cursor: pointer;
float: right;
width: 58px;
position: relative;
height: 58px;
margin-right: -20px;
}
.content .header__fake .icn__wrap .icn__hamburger {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-6px);
-ms-transform: translateX(-50%) translateY(-6px);
transform: translateX(-50%) translateY(-6px);
display: block;
width: 18px;
height: 1px;
z-index: 999;
background: #fff;
}
.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
content: "";
float: left;
display: block;
width: 100%;
height: 1px;
background: #fff;
margin: 5px 0 0;
}
.content .header__fake .icn__wrap .icn__hamburger:before {
margin: 6px 0 0;
}
.content .header__fake .icn__wrap svg {
z-index: 10;
}
.content .header__fake .icn__wrap svg circle {
fill: none;
stroke: #fff;
stroke-width: .5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 39 39;
stroke-dashoffset: -39;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.animated .btm__border {
left: 100%;
right: 4px;
}
.content .header__fake.animated svg circle {
stroke-dashoffset: 0;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.fix .btm__border {
-webkit-animation: fix 0.2s linear;
animation: fix 0.2s linear;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
right: 5px;
}
#-webkit-keyframes fix {
from {
right: 5px;
}
to {
right: 0;
}
}
#keyframes fix {
from {
right: 5px;
}
to {
right: 0;
}
}
js:
$(document).ready(function(){
console.log("ready");
$header = $('.header__fake');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 20) {
$header.addClass('animated').removeClass('fix');
} else {
$header.removeClass('animated').addClass('fix');
}
});
});

Image avoiding the cursor using Javascript and HTML?

so im trying to make an image move away from the mouse everytime the mouse comes near it. I found a code here:http://jsfiddle.net/karalamalar/atNva/ but im having trouble making it work. I think im implementing it wrong into my webpage as it is my 1st time working with html, css and javascript. Can someone let me know what im doing wrong and how i would go about fixing it (if any).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Websites</title>
<style type="text/css">
th, td {
padding: 15px;
table-layout: fixed;
width: 180px;
z-index:100;
padding: 0px;
}
td {
text-align: center;
font-family:"Times New Roman", Helvetica, sans-serif;
font-size: 15pt;
border-radius:5px
}
.center{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottomright{
position: fixed;
bottom:-2%;
right:0.5%
}
a {
color:#00003D;
text-decoration:none
}
a:hover {
color: orange;
font-size: 105%;
}
img.DoorTop{
width: 100%;
height: 50%;
position: fixed;
top: 0;
left: 0;
z-index: 100000;
-webkit-animation: moveUp 5s forwards;
animation: moveUp 5s forwards;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#keyframes moveUp {
from {top:0%;}
to {top:-100%;}
}
#-webkit-keyframes moveUp {
from {top:0%;}
to {top:-100%;}
}
img.DoorBottom{
width: 100%;
height: 50%;
position: fixed;
bottom: 0;
left: 0;
z-index: 100000;
-webkit-animation: moveDown 5s forwards;
animation: moveDown 5s forwards;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#keyframes moveDown {
from {bottom:0%;}
to {bottom:-100%;}
}
#-webkit-keyframes moveDown {
from {bottom:0%;}
to {bottom:-100%;}
}
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid;
border-left: 5px solid ;
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
animation: spinPulse 1s infinite linear;
-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;
border-right: 5px solid;
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 10px;
height: 10px;
margin: 0 auto;
position: relative;
top: -30px;
animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
#keyframes spinPulse {
0% {
transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
transform: rotate(145deg);
opacity: 1;
}
100% {
transform: rotate(-320deg);
opacity: 0;
}
}
#keyframes spinoffPulse {
0% {
transform: rotate(0deg);
}
100% {
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);
}
}
img.growturn {
transition: width 2s, height 2s, transform 2s;
}
img.growturn:hover {
width: 400px;
height: 400px;
transform: translate(-50%, -50%);
}
body { position: relative; }
#img { position: relative; }
</style>
</head>
<body id="body" style="background:url(webdata/images/index/background.png) no-repeat; background-attachment: fixed; background-size:100% 100%;">
<img src="webdata/images/index/emblem.png" width="50" height="50" alt="Grey Square" id="img" style="z-index:900"/>
<script>jQuery(function($) {
$('#img').mouseover(function() {
var dWidth = $(document).width() - 100, // 100 = image width
dHeight = $(document).height() - 100, // 100 = image height
nextX = Math.floor(Math.random() * dWidth),
nextY = Math.floor(Math.random() * dHeight);
$(this).animate({ left: nextX + 'px', top: nextY + 'px' });
});
});
</script>
<div>
<img class="DoorTop" src="webdata/images/index/topDoor.png" alt="topDoor">
<img class="DoorBottom" src="webdata/images/index/bottomDoor.png" alt="bottomDoor">
</div>
<div class="center">
<table class="button">
<tr>
<td colspan="4">
<img class="growturn" src="webdata/images/index/emblem.png" alt="" height="40" width="40" style="position:absolute; left:28%; top:6%">
<p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 15pt; color: white;">PROJECT <strong>COSC</strong>2206</p>
</td>
</tr>
<tr>
<td colspan="4" style="font-family:Geneva, 'Book Antiqua', Palatino, serif; font-size: 40pt; color: orange">WELCOME TO My WYBSITE</td>
</tr>
<tr>
<td colspan="4" style="font-family:Helvetica, sans-serif; font-size: 9pt; color:#C2F0FF; letter-spacing: 1px; padding: 20px">Welcome to Project COSC2206. All assignments can be viewed below once they become available or simply return to the iTool's.</td>
</tr>
<tr>
<td style="background-color:#00CCFF;">Itool</td>
<td style="background-color:#00CCFF;">Assignment 2</td>
<td style="background-color:#00CCFF;">Assignment 3</td>
<td style="background-color:#00CCFF;">Assignment 4</td>
</tr>
</table>
</div>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fcoscvm23.cs.laurentian.ca%2F;outline=1" target="_blank">
<img src="webdata/images/index/HTML5_Badge.png" alt="" width="28" height="27" style="position: fixed; float: left; left: 7px; bottom: 5px;">
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">
<img src="webdata/images/index/CSS3.png" alt="" width="31" height="31" style="position: fixed; float: left; left: 35px; bottom: 2px;">
</a>
<div class="bottomright">
<div class="circle"></div>
<div class="circle1"></div>
</div>
</body>
</html>

If that's the entire code for you webpage, you'll need to include jQuery. I like to use Google's, but you can host it yourself as well:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Edit: you could put the code above anywhere in the head, and you should be good to go.

Need help to make Polygon Navigation style with transitions

Can anyone please help me to make my Polygon navigation more accurate on different browsers because it works on Chrome but looks ugly on Firefox no support for IE also. Can anyone please help me add some jQuery / css3 code to make it work in at least Chrome & Firefox. suggest some code to make it better .. Thank You !
HTML Markup :
<div id="left_rot"></div>
<div id="str"></div>
<div id="right_rot"></div>
<div id="nav">
<input type="checkbox" id="switch" name="switch" class="chkbx">
<label for="switch" class="pin"><span class="open">Open</span>
<span class="close">Close</span> Menu</label>
<span class="link1">Link1</span>
<span class="link2">Link2</span>
<span class="link3">link3</span>
<span class="link4">link4</span>
<span class="link5">link5</span>
<span class="link6">link6</span>
</div>
fiddle link for css : http://jsfiddle.net/thekiddev/d8MLQ/

I have work on your project, and changed 2 things.
I have changed your HTML, mainly to change the classes link1, link2, and so, to class link and ids link1 link2 link3.. That makes for a more compact code, since I can set shared properties for all the links.
Also, I have changed the way you position your triangles. Instead of setting positions for every one of them with top and left, I position all of them the same way. And then, I rotate them with the rotation center in the lower vertix of the triangle. That makes positioning them much easier.
The modified HTML is
<div id="nav">
<!-- Option for Opening or Closing menu -->
<input type="checkbox" id="switch" name="switch" class="chkbx">
<label for="switch" class="pin"><span class="open">Open</span><span class="close">Close</span> Menu</label>
<!-- Links -->
<span class="link" id="link1">Link1</span>
<span class="link" id="link2">Link2</span>
<span class="link" id="link3">link3</span>
<span class="link" id="link4">link4</span>
<span class="link" id="link5">link5</span>
<span class="link" id="link6">link6</span>
</div>
And the CSS is
* {
margin: 0;
padding: 0;
}
body {
background:#3498DB;
}
#nav {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 350px auto;
position: absolute;
text-align:center;
}
#left_rot {
width: 200px;
height: 350px;
position: absolute;
background: #E67E22;
top: 0;
left:0;
right:0;
bottom:0;
margin:170px auto;
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
#right_rot {
width: 200px;
height: 350px;
position: absolute;
background: #E67E22;
top:0;
left:0;
right:0;
bottom:0;
margin:170px auto;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
#str {
width: 200px;
height: 350px;
position: absolute;
background: #E67E22;
top: 0;
left:0;
right:0;
bottom:0;
margin:170px auto;
text-align: center;
}
span {
z-index:555 !important;
}
span a {
}
span a:hover {
background:rgba(0, 0, 0, .1);
box-shadow:inset 0 0 4px 0px rgba(0, 0, 0, .2);
}
.link a {
margin-left: -80px;
top:-142px;
text-decoration:none;
text-transform:uppercase;
font-weight:bold;
font-size:24px;
text-align:center;
background:transparent;
color:#fff !important;
padding: 0px;
position:absolute;
text-shadow:0 2px 1px rgba(0, 0, 0, .2);
-webkit-transition: all ease 0.50s;
transition: all ease 0.50s;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
height: 140px;
width: 162px;
}
#link2 a {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
#link3 a {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
#link4 a {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#link5 a {
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
}
#link6 a {
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
}
.link a:before {
position: absolute;
content:'';
width:0;
height:0;
top:0;
left:0;
border-style:solid;
border-width: 140px 81px 0px 81px;
border-color:transparent;
border-top-color: #fff;
margin:0px;
z-index:5;
-webkit-transition: all 0.55s linear;
transition: all 0.55s linear;
}
#link2 a:before, #link4 a:before, #link6 a:before {
border-top-color: #ECF0F1;
}
.chkbx {
display: none;
margin: 0px auto;
}
.pin {
display: block;
width: 200px;
padding: 10px 25px;
font-family: century gothic;
background:rgba(252, 252, 252, 1);
position: fixed;
top: -300px;
left: 0;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 24px;
text-transform: uppercase;
text-align: center;
color: #666;
position: relative;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.chkbx:checked ~ .pin {
color: #fff;
background: rgba(252, 252, 252, .5);
}
.chkbx:checked ~ .link a:before {
border-color: transparent !important;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.close {
display: none;
}
.chkbx:checked ~ .pin span.close {
display: inline-block !important;
}
.chkbx:checked ~ .pin span.open {
display: none !important;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
footer h2, p {
font-family: century gothic;
color: #fefefe;
}
footer p a {
text-decoration: none;
font-weight: bold;
color: #1f2f3f;
}
fiddle
I have remover prefixed properties that aren't needed in modern browsers to keep the example short. It works ok in latest Chrom, Firefox and IE.