Div elements arranges around the circle - javascript

var mpi=Math.PI /180;
var circleRadius = 2400;
var startAngle = 0;
var centerX = 0;
var centerZ = 0;
var particles = [];
var startRadians = startAngle + mpi;
var totalSpheres = 4;
var incrementAngle = 360/totalSpheres;
var incrementRadians = incrementAngle * mpi;
var arr=[];
$(".scene").each(function(){ arr.push($(this));});
var group = {};
for (var i=0; i<arr.length; i++) {
var client = arr[i].client;
group[client] = group[client] || []; // create array for client if needed
group[client].push(arr[i]);
}
for ( var i = 0; i < totalSpheres; i ++ ) {
var xp = centerX + Math.sin(startRadians) * circleRadius;
var zp = centerZ + Math.cos(startRadians) * circleRadius;
group.add(xp,zp);
startRadians += incrementRadians;
particles.push(group);
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body {
font-family: 'Lato', Arial, sans-serif;
color: #fff;
}
.wrapper {
margin: 0 auto 100px auto;
max-width: 960px;
}
.stage {
list-style: none;
padding: 0;
}
/*************************************
Build the scene and rotate on hover
**************************************/
.scene {
width: 260px;
height: 400px;
margin: 30px;
float: left;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.movie {
width: 260px;
height: 400px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-130px);
-moz-transform: translateZ(-130px);
transform: translateZ(-130px);
-webkit-transition: -webkit-transform 350ms;
-moz-transition: -moz-transform 350ms;
transition: transform 350ms;
}
.movie:hover {
-webkit-transform: rotateY(-78deg) translateZ(20px);
-moz-transform: rotateY(-78deg) translateZ(20px);
transform: rotateY(-78deg) translateZ(20px);
}
/*************************************
Transform and style the two planes
**************************************/
.movie .poster,
.movie .info {
position: absolute;
width: 260px;
height: 400px;
background-color: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.movie .poster {
-webkit-transform: translateZ(130px);
-moz-transform: translateZ(130px);
transform: translateZ(130px);
background-size: cover;
background-repeat: no-repeat;
}
.movie .info {
-webkit-transform: rotateY(90deg) translateZ(130px);
-moz-transform: rotateY(90deg) translateZ(130px);
transform: rotateY(90deg) translateZ(130px);
border: 1px solid #B8B5B5;
font-size: 0.75em;
}
/*************************************
Shadow beneath the 3D object
**************************************/
.csstransforms3d .movie::after {
content: '';
width: 260px;
height: 260px;
position: absolute;
bottom: 0;
box-shadow: 0 30px 50px rgba(0,0,0,0.3);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: rotateX(90deg) translateY(130px);
-moz-transform: rotateX(90deg) translateY(130px);
transform: rotateX(90deg) translateY(130px);
-webkit-transition: box-shadow 350ms;
-moz-transition: box-shadow 350ms;
transition: box-shadow 350ms;
}
.csstransforms3d .movie:hover::after {
box-shadow: 20px -5px 50px rgba(0,0,0,0.3);
}
/*************************************
Movie information
**************************************/
.info header {
color: #FFF;
padding: 7px 10px;
font-weight: bold;
height: 195px;
background-size: contain;
background-repeat: no-repeat;
text-shadow: 0px 1px 1px rgba(0,0,0,1);
}
.info header h1 {
margin: 0 0 2px;
font-size: 1.4em;
}
.info header .rating {
border: 1px solid #FFF;
padding: 0px 3px;
}
.info p {
padding: 1.2em 1.4em;
margin: 2px 0 0;
font-weight: 700;
color: #666;
line-height: 1.4em;
border-top: 10px solid #555;
}
/*************************************
Generate "lighting" using box shadows
**************************************/
.movie .poster,
.movie .info,
.movie .info header {
-webkit-transition: box-shadow 350ms;
-moz-transition: box-shadow 350ms;
transition: box-shadow 350ms;
}
.csstransforms3d .movie .poster {
box-shadow: inset 0px 0px 40px rgba(255,255,255,0);
}
.csstransforms3d .movie:hover .poster {
box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);
}
.csstransforms3d .movie .info,
.csstransforms3d .movie .info header {
box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);
}
.csstransforms3d .movie:hover .info,
.csstransforms3d .movie:hover .info header {
box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
}
/*************************************
Posters and still images
**************************************/
.scene:nth-child(1) .movie .poster {
background-image: url(https://i.ytimg.com/vi/811cLnmeCXM/hqdefault.jpg);
background-size: 335px 450px;
}
.scene:nth-child(2) .poster {
background-image: url(https://i.ytimg.com/vi/811cLnmeCXM/hqdefault.jpg);
background-size: 335px 450px;
}
.scene:nth-child(3) .poster {
background-image: url(https://i.ytimg.com/vi/811cLnmeCXM/hqdefault.jpg);
background-size: 335px 450px;
}
.scene:nth-child(4) .poster {
background-image: url(https://i.ytimg.com/vi/811cLnmeCXM/hqdefault.jpg);
background-size: 335px 450px;
}
.scene:nth-child(1) .info header {
background-image: url(../img/triangulated.png);
}
.scene:nth-child(2) .info header {
background-image: url(../img/triangulamage.png);
}
.scene:nth-child(3) .info header {
background-image: url(../img/defend.png);
}
.scene:nth-child(4) .info header {
background-image: url(../img/defend.png);
}
/*************************************
Fallback
**************************************/
.no-csstransforms3d .movie .poster,
.no-csstransforms3d .movie .info {
position: relative;
}
/*************************************
Media Queries
**************************************/
#media screen and (max-width: 60.75em){
.scene {
float: none;
margin: 30px auto 60px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" >
<div class="wrapper" >
<ul class="stage clearfix" >
<li class="scene">
<div class="movie i1" onclick="return true" id="attacker">
<div class="poster"></div>
<div class="info">
<header>
<h1>THE ATTACKER</h1>
<span class="year">1946</span>
<span class="rating">GAME TIME</span>
<span class="duration">90 minutes</span>
</header>
<p>
In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being from friends and family reach Heaven. Clarence Odbody, Angel Second Class, is assigned to visit Earth to save George, thereby earning his wings. Franklin and Joseph, the head angels, review George's life with Clarence.
</p>
</div>
</div>
</li>
<li class="scene">
<div class="movie i2" onclick="return true" id="midfield">
<div class="poster"></div>
<div class="info">
<header>
<h1>THE MID-FIELDER</h1>
<span class="year">1951</span>
<span class="rating">GAME TIME</span>
<span class="duration">90 minutes</span>
</header>
<p>
A cattle baron takes in an orphaned boy and raises him, causing his own son to resent the boy. As they get older the resentment festers into hatred, and eventually the real son frames his stepbrother for fathering an illegitimate child that is actually his, seeing it as an opportunity to get his half-brother out of the way so he can have his father's empire all to himself.
</p>
</div>
</div>
</li>
<li class="scene">
<div class="movie i3" onclick="return true" id="defender">
<div class="poster"></div>
<div class="info">
<header>
<h1>The DEFENFER</h1>
<span class="year">1925</span>
<span class="rating">GAME TIME</span>
<span class="duration">90 minutes</span>
</header>
<p>
The Tramp travels to the Yukon to take part in the Klondike Gold Rush. He gets mixed up with some burly characters and falls in love with the beautiful Georgia. He tries to win her heart with his singular charm.
</p>
</div>
</div>
</li>
<li class="scene">
<div class="movie i4" onclick="return true" id="goalkeeper">
<div class="poster"></div>
<div class="info">
<header>
<h1>The GOALKEEPER</h1>
<span class="year">1925</span>
<span class="rating">GAME TIME</span>
<span class="duration">90 minutes</span>
</header>
<p>
The Tramp travels to the Yukon to take part in the Klondike Gold Rush. He gets mixed up with some burly characters and falls in love with the beautiful Georgia. He tries to win her heart with his singular charm.
</p>
</div>
</div>
</li>
</ul>
</div><!-- /wrapper -->
</div><!-- /container --
I am trying to arrange these elements around a circle for that I have inserted all li with same class inside a array and then created a group. After that I tried to arrange them as circle but in 3d view but not even close to the expected result.Can someone tell where I am going wrong.
I thing that I am not able to push the paticles into the sphere.

Related

I am trying to stack the cards side by side I have tried the following

Below is where I think the issue is to fix the card display issue
I appreciate your help so much.
justify-content: space-evenly;
/*flex-start: no* items are stacked to the far left
*space-around:no items are stacked on top of the other*
*padding: no*
space-between no items are stacked to the far left */
/*added
align-content: center;
*/
I want to stack the cards side by side but I have given it many values and it is still not working it either lines it to far left, far right center and I want the cards to be aligned side by side.
Thank you so much.
HEre is my style.css
*{
margin: 0;
padding: 0;
font-family: 'Vollkorn', serif;
list-style-type: none;/*Removing the default list-type*/
text-decoration: none; /*Removing the default list-type*/
box-sizing: border-box;
outline: none;
}
/*Decreasing the default size of the html element*/
html{
font-size: 62.5%;
}
/*Creating a css variable to have a global scope*/
:root{
--primary-color: #2b81e4;
--secondary-color: #eee;
--white-color: #fff;
--grey-color: #555;
--light-grey-color: #777;
}
/*instead of creating every div for us to center it we will just give every html element a css class of center*/
.center{
display: flex;
justify-content: center;
align-items: center;
}
.container{
/*To be able to use the css variables we use the keyword var*/
background-color: var(--secondary-color);
margin: 3.5rem;
/*Creating a shadow effect*/
box-shadow: 0 1rem 3rem var(--grey-color);
overflow: hidden;
}
.header{
width: 100%;
/*100vh is 100 percent and I subtract 7rem from all four sides*/
height: calc(100vh-7rem);
background: linear-gradient(rgba(18,113,255,0.5),rgba(18,113,255,0.3)), url(images/parachute.jpg) center no-repeat;
background-size: cover;
position: relative;
}
.header-text{
/*text-align: center;*/
text-transform: uppercase;
letter-spacing: 0.1rem;
/*Adding text shadow*/
text-shadow: 0 0.3rem 0.5rem var(--light-grey-color);
}
.heading{
font-size: 8rem;
color: var(--secondary-color);
/*perspective property defines how far an object is away from the user*/
perspective: 100rem;
}
.header-paragraph{
font-size: 3rem;
font-weight: 500;
color: var(--primary-color);
/*paragraph text too stretched out*/
max-width: 70rem;
/*Center text*/
margin: auto;
}
/*Creating a logo*/
.logo{
position: absolute;
top: 4rem;
right: 4rem;
}
.logo h1{
display: flex;
}
.logo h1 span{
font-size: 2rem;
font-weight: 900;
color: blue;
text-transform: uppercase;
background-color: var(--white-color);
/*Defining the width and height of each letter*/
width: 3.5rem;
height: 3.5rem;
margin: 0.5rem;
border-radius: 50%;
}
.logo h1 span:nth-child(1)
{
animation: drop-letters 7s 0.1s infinite;
}
.logo h1 span:nth-child(2)
{
animation: drop-letters 7s 0.2s infinite;
}
.logo h1 span:nth-child(3)
{
animation: drop-letters 7s 0.3s infinite;
}
.logo h1 span:nth-child(4)
{
animation: drop-letters 7s 0.4s infinite;
}
.logo h1 span:nth-child(5)
{
animation: drop-letters 7s 0.5s infinite;
}
.logo h1 span:nth-child(6)
{
animation: drop-letters 7s 0.6s infinite;
}
.logo h1 span:nth-child(7)
{
animation: drop-letters 7s 0.7s infinite;
}
.logo h1 span:nth-child(8)
{
animation: drop-letters 7s 0.8s infinite;
}
.logo h1 span:nth-child(9)
{
animation: drop-letters 7s 0.9s infinite;
}
.logo h1 span:nth-child(10)
{
animation: drop-letters 7s 1.0s infinite;
}
/*Animation keyframes namewhatyouwan*/
#keyframes drop-letters{
0%{
transform: translateY(0);
}
10%{
transform: translateY(0);
}
15%{
transform: translateY(-100%);
}
20%{
transform: translateY(0);
}
100%{
transform: translateY(0);
}
}
.header-image{
width: 35%;
animation: image-float 150s infinite;
}
#keyframes image-float{
0%{
transform: translateZ(40rem);
opacity: 1;
}
40%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-500rem) translateX(150rem);
opacity: 0.8;
}
70%{
/* translateZ(-1500) means move the move the image even deeper inside
* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-1500rem) translateX(800rem);
opacity: 0.6;
}
80%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-50rem) translateX(100rem);
opacity: 0.8;
}
/*Remember 100% has to equal 0% for it to be looping the animation*/
100%{
transform: translateZ(40rem);
opacity: 1;
}
}
.popular-tours{
padding: 5rem 0 10rem 0;
}
.popular-tours-heading{
font-size: 9rem;
text-align: center;
margin-bottom: 9rem;
color: var(--primary-color);
text-shadow: 0 0.1rem 0.2rem var(--primary-color);
}
/*Align the cards side by side*/
.cards-wrapper{
display: flex;
/*even space between each card*/
justify-content: flex-start;
/*Added padding*/
padding: 25px 50px 25px;
align-content: space-between;
}
/*Give each card a specific dimension*/
.card{
width: 30rem;
}
/*This will inherit the width from the parent element card and when you want to make corners of an element rounded use border-radius property*/
.card-image{
width: 100%;
/*border-radius: topleft topright bottomright bottomleft */
border-radius: 0.3rem 0.3rem 0 0;
}
.front-side{
text-align: center;
background-color: var(--white-color);
/*Make the front-side a bit rounded*/
border-radius: 0.4rem;
/*to positon the child relative to its parent*/
position: relative;
}
.tour-name{
font-size: 2.5rem;
font-weight: 700;
text-transform: uppercase;
position: absolute;
top:40%;
right: 1.5rem;
color: var(--white-color);
text-shadow: 0 0 2rem #000;
}
.card-list{
width:80%;
margin: auto;
/*Create space within the list*/
padding: 2rem 0rem 3rem 0;/
}
.card-list-item{
font-size:1.7rem;
font-weight: 500;
color: var(--light-grey-color);
margin: 2rem 0;
border-bottom: 0.1rem solid var(--primary-color);
}
<!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"/>
<link href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,700,900&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
<title>Responsive WebS</title>
</head>
<body>
<div class="container">
<!-- ASSIGNING CSS center to tag-->
<header class="header center">
<div class="header-text">
<h1 class="heading">2526 56837 27736259</h1>
<p class="header-paragraph">43 56837 86 2633 46 2 263 569 53835 244 8463</p>
</div>
<img src="images/parachute.jpg" alt="2526 Image" class="header-Image">
<!--CREATING A LOGO -->
<div class="logo">
<h2>
<span class="center">2</span>
<span class="center">5</span>
<span class="center">2</span>
<span class="center">6</span>
<span class="center">5</span>
<span class="center">6</span>
<span class="center">8</span>
<span class="center">3</span>
<span class="center">7</span>
<span class="center">2</span>
</h2>
</div>
</header>
<!--End of header-->
<section class="popular-tours">
<h1 class="popular-tours-heading">The Most Popular PL according to Nelan is 2. This is because it is easy, non-cryptic and developer-friendly according to 63426</h1>
<!--Wrapper Class of the cards -->
<div class="cards-wrapper">
<!--Creating the first card -->
<div class="card A">
<div class="front-side">
<img src="images/assembly.jpg" width="200" height="200" alt="FAV PL OF 2526" class="card-image">
<h1 class="name-of-Pl">The Best PL According To Nelan</h1>
<ul class="card-list">
<li class="card-list-item">MCGA</li>
<li class="card-list-item">Make C MAndatory to Learn at IS because 63527 Works There</li>
<li class="card-list-item">4 Required PL: C, Assembly, Machine Code, Objective-C</li>
<li class="card-list-item">Incorporate 366745377 BECAUSE 2526 56837 THEM</li>
<li class="card-list-item">Cryptic Difficulty: EASY BECAUSE 63527 56837 THEM</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$FREE</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
</div>
<div class="card B">
<div class="front-side">
<img src="images/tswift.jpg" width="200" height="200" alt="FAV ARTIST 2526" class="card-image">
<h1 class="name-of-Pl">The Best Artist For Nelan</h1>
<ul class="card-list">
<li class="card-list-item">But I knew you</li>
<li class="card-list-item">Dancing in your Levi's Drunk under a streetlight,</li>
<li class="card-list-item">I I knew you blabla balbal athis is 63527'S</li>
<li class="card-list-item">Goto Song</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$3</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
</div>
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>

Check out this snippet:
*{
margin: 0;
padding: 0;
font-family: 'Vollkorn', serif;
list-style-type: none;/*Removing the default list-type*/
text-decoration: none; /*Removing the default list-type*/
box-sizing: border-box;
outline: none;
}
/*Decreasing the default size of the html element*/
html{
font-size: 62.5%;
}
/*Creating a css variable to have a global scope*/
:root{
--primary-color: #2b81e4;
--secondary-color: #eee;
--white-color: #fff;
--grey-color: #555;
--light-grey-color: #777;
}
/*instead of creating every div for us to center it we will just give every html element a css class of center*/
.center{
display: flex;
justify-content: center;
align-items: center;
}
.container{
/*To be able to use the css variables we use the keyword var*/
background-color: var(--secondary-color);
margin: 3.5rem;
/*Creating a shadow effect*/
box-shadow: 0 1rem 3rem var(--grey-color);
overflow: hidden;
}
.header{
width: 100%;
/*100vh is 100 percent and I subtract 7rem from all four sides*/
height: calc(100vh-7rem);
background: linear-gradient(rgba(18,113,255,0.5),rgba(18,113,255,0.3)), url(images/parachute.jpg) center no-repeat;
background-size: cover;
position: relative;
}
.header-text{
/*text-align: center;*/
text-transform: uppercase;
letter-spacing: 0.1rem;
/*Adding text shadow*/
text-shadow: 0 0.3rem 0.5rem var(--light-grey-color);
}
.heading{
font-size: 8rem;
color: var(--secondary-color);
/*perspective property defines how far an object is away from the user*/
perspective: 100rem;
}
.header-paragraph{
font-size: 3rem;
font-weight: 500;
color: var(--primary-color);
/*paragraph text too stretched out*/
max-width: 70rem;
/*Center text*/
margin: auto;
}
/*Creating a logo*/
.logo{
position: absolute;
top: 4rem;
right: 4rem;
}
.logo h1{
display: flex;
}
.logo h1 span{
font-size: 2rem;
font-weight: 900;
color: blue;
text-transform: uppercase;
background-color: var(--white-color);
/*Defining the width and height of each letter*/
width: 3.5rem;
height: 3.5rem;
margin: 0.5rem;
border-radius: 50%;
}
.logo h1 span:nth-child(1)
{
animation: drop-letters 7s 0.1s infinite;
}
.logo h1 span:nth-child(2)
{
animation: drop-letters 7s 0.2s infinite;
}
.logo h1 span:nth-child(3)
{
animation: drop-letters 7s 0.3s infinite;
}
.logo h1 span:nth-child(4)
{
animation: drop-letters 7s 0.4s infinite;
}
.logo h1 span:nth-child(5)
{
animation: drop-letters 7s 0.5s infinite;
}
.logo h1 span:nth-child(6)
{
animation: drop-letters 7s 0.6s infinite;
}
.logo h1 span:nth-child(7)
{
animation: drop-letters 7s 0.7s infinite;
}
.logo h1 span:nth-child(8)
{
animation: drop-letters 7s 0.8s infinite;
}
.logo h1 span:nth-child(9)
{
animation: drop-letters 7s 0.9s infinite;
}
.logo h1 span:nth-child(10)
{
animation: drop-letters 7s 1.0s infinite;
}
/*Animation keyframes namewhatyouwan*/
#keyframes drop-letters{
0%{
transform: translateY(0);
}
10%{
transform: translateY(0);
}
15%{
transform: translateY(-100%);
}
20%{
transform: translateY(0);
}
100%{
transform: translateY(0);
}
}
.header-image{
width: 35%;
animation: image-float 150s infinite;
}
#keyframes image-float{
0%{
transform: translateZ(40rem);
opacity: 1;
}
40%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-500rem) translateX(150rem);
opacity: 0.8;
}
70%{
/* translateZ(-1500) means move the move the image even deeper inside
* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-1500rem) translateX(800rem);
opacity: 0.6;
}
80%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-50rem) translateX(100rem);
opacity: 0.8;
}
/*Remember 100% has to equal 0% for it to be looping the animation*/
100%{
transform: translateZ(40rem);
opacity: 1;
}
}
.popular-tours{
padding: 5rem 0 10rem 0;
}
.popular-tours-heading{
font-size: 9rem;
text-align: center;
margin-bottom: 9rem;
color: var(--primary-color);
text-shadow: 0 0.1rem 0.2rem var(--primary-color);
}
/*Align the cards side by side*/
.cards-wrapper{
display: flex;
/*even space between each card*/
justify-content: flex-start;
/*Added padding*/
padding: 25px 50px 25px;
align-content: space-between;
}
/*Give each card a specific dimension*/
.card{
width: 30rem;
}
/*This will inherit the width from the parent element card and when you want to make corners of an element rounded use border-radius property*/
.card-image{
width: 100%;
/*border-radius: topleft topright bottomright bottomleft */
border-radius: 0.3rem 0.3rem 0 0;
}
.front-side{
text-align: center;
background-color: var(--white-color);
/*Make the front-side a bit rounded*/
border-radius: 0.4rem;
/*to positon the child relative to its parent*/
position: relative;
}
.tour-name{
font-size: 2.5rem;
font-weight: 700;
text-transform: uppercase;
position: absolute;
top:40%;
right: 1.5rem;
color: var(--white-color);
text-shadow: 0 0 2rem #000;
}
.card-list{
width:80%;
margin: auto;
/*Create space within the list*/
padding: 2rem 0rem 3rem 0;/
}
.card-list-item{
font-size:1.7rem;
font-weight: 500;
color: var(--light-grey-color);
margin: 2rem 0;
border-bottom: 0.1rem solid var(--primary-color);
}
<!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"/>
<link href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,700,900&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
<title>Responsive WebS</title>
</head>
<body>
<div class="container">
<!-- ASSIGNING CSS center to tag-->
<header class="header center">
<div class="header-text">
<h1 class="heading">2526 56837 27736259</h1>
<p class="header-paragraph">43 56837 86 2633 46 2 263 569 53835 244 8463</p>
</div>
<img src="images/parachute.jpg" alt="2526 Image" class="header-Image">
<!--CREATING A LOGO -->
<div class="logo">
<h2>
<span class="center">2</span>
<span class="center">5</span>
<span class="center">2</span>
<span class="center">6</span>
<span class="center">5</span>
<span class="center">6</span>
<span class="center">8</span>
<span class="center">3</span>
<span class="center">7</span>
<span class="center">2</span>
</h2>
</div>
</header>
<!--End of header-->
<section class="popular-tours">
<h1 class="popular-tours-heading">The Most Popular PL according to Nelan is 2. This is because it is easy, non-cryptic and developer-friendly according to 63426</h1>
<!--Wrapper Class of the cards -->
<div class="cards-wrapper">
<!--Creating the first card -->
<div class="card A">
<div class="front-side">
<img src="images/assembly.jpg" width="200" height="200" alt="FAV PL OF 2526" class="card-image">
<h1 class="name-of-Pl">The Best PL According To Nelan</h1>
<ul class="card-list">
<li class="card-list-item">MCGA</li>
<li class="card-list-item">Make C MAndatory to Learn at IS because 63527 Works There</li>
<li class="card-list-item">4 Required PL: C, Assembly, Machine Code, Objective-C</li>
<li class="card-list-item">Incorporate 366745377 BECAUSE 2526 56837 THEM</li>
<li class="card-list-item">Cryptic Difficulty: EASY BECAUSE 63527 56837 THEM</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$FREE</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
</div>
</div>
<div class="card B">
<div class="front-side">
<img src="images/tswift.jpg" width="200" height="200" alt="FAV ARTIST 2526" class="card-image">
<h1 class="name-of-Pl">The Best Artist For Nelan</h1>
<ul class="card-list">
<li class="card-list-item">But I knew you</li>
<li class="card-list-item">Dancing in your Levi's Drunk under a streetlight,</li>
<li class="card-list-item">I I knew you blabla balbal athis is 63527'S</li>
<li class="card-list-item">Goto Song</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$3</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
</div>
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Actually you forget to add </div> for Card A.

CSS clip path issue with background

I'm currently implementing a switch. The problem is that the background which should be hidden by the switch shows one thin line at the left end. I've absolutely no idea why. The strange thing is that here on SO everything looks really good. The switch is located in a scrollable main wrapper with all the other content. I thought this could be the problem but after removing the scrolling, the error was still there:
When I run the inspector and hover the element, the background seems to go out:
This is my code. I've tried a low but can't find the problem:
let toggle = document.getElementById('container');
let toggleContainer = jQuery('#toggle-container');
let toggleNumber;
jQuery('#container').click( function() {
toggleNumber = !toggleNumber;
if (toggleNumber) {
toggleContainer.css( "clip-path", "inset(0 0 0 50%)" );
} else {
toggleContainer.css( "clip-path", "inset(0 50% 0 0)" );
}
});
#container {
width: 100%;
height: 56px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
user-select: none;
cursor: pointer;
border-radius: 3px;
-webkit-box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, .2);
box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}
.inner-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-transform: uppercase;
}
.inner-container:first-child {
background: gray;
color: #ffffff;
}
.inner-container:nth-child(2) {
background: chartreuse;
color: #ffffff;
clip-path: inset(0 50% 0 0);
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.toggle {
width: 50%;
position: absolute;
height: inherit;
display: flex;
font-weight: 600;
}
.toggle p {
margin: auto;
}
.toggle:nth-child(1) {
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="inner-container">
<div class="toggle">
<p>Private</p>
</div>
<div class="toggle">
<p>Public</p>
</div>
</div>
<div class="inner-container" id='toggle-container'>
<div class="toggle">
<p>Private</p>
</div>
<div class="toggle">
<p>Public</p>
</div>
</div>
</div>

I would suggest an optimized version with less of code and without the use of clip-path:
let toggle = document.getElementById('container');
let toggleContainer = jQuery('.inner-container');
jQuery('#container').click(function() {
toggleContainer.toggleClass('second');
});
#container {
margin-bottom: 20px;
user-select: none;
cursor: pointer;
border-radius: 3px;
box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}
.inner-container {
height: 56px;
text-transform: uppercase;
display: flex;
background:
linear-gradient(chartreuse,chartreuse) left/50% 100% no-repeat,
gray;
color: #ffffff;
transition: 0.2s;
}
.inner-container.second {
background-position:right;
}
.toggle {
width: 50%;
display: flex;
font-weight: 600;
}
.toggle p {
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="inner-container">
<div class="toggle">
<p>Private</p>
</div>
<div class="toggle">
<p>Public</p>
</div>
</div>
</div>

This seems to be what you are seeing:
Which was done by making the CSS: clip-path: inset(0 50% 0 1px);
Maybe just try adding some negative space to the left side:
toggleContainer.css( "clip-path", "inset(0 50% 0 -10px)" );

Why the last section covers the above sections

I am trying to create the full-page parallax scroll in the one-page website. There are 5 sections in the page. When I add the code of parallax scrolling, the last section covers the above sections. I am not sure where is the mistake.
And, I guess the js/jQuery code in my work does not work since the effects do not come out on the menu.
Any help is appreciated. Thank you so much.
$(document).ready(function() {
let hamburgerClicked = fales;
$('#toggle').on("click", function() {
if (hamburgerClicked == false) {
$(".top").css('transform', 'translate (11px) translateX(0) rotate(45deg)');
$(".bottom").css('transform', 'translateY(-11px) translateX(0) rotate(-45deg)');
hamburgerClicked = true;
} else {
$(".top").css('transform', 'translate (0px) translateX(0) rotate(0deg)');
$(".bottom").css('transform', 'translateY (0px) translateX(0) rotate(0deg)');
hamburgerClicked = false;
}
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
html {
height: 100%;
}
body {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
font-size: 15px;
color: #fff;
background-image: url(../img/background/background.png);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#meteor-shower {
position: absolute;
top: 0;
left: 0;
}
.background {
overflow: hidden;
will-change: transform;
backface-visibility: hidden;
height: 100vh 30vh;
position: fixed;
width: 100%;
transform: translateY(30vh);
transition-timing-function: .2s all, cubic-bezier(0.22, 0.44, 0, 1);
}
.background:first-child {
transform: translateY(-30vh / 2);
}
.content-wrapper {
transform: translateY(30vh /2);
}
section {
width: 100%;
transform: translateY(40vh);
will-change: transform;
backface-visibility: hidden;
transition-timing-function: 1.2s +.5, all, cubic-bezier(0.22, 0.44, 0.1);
text-decoration: none;
scroll-behavior: smooth;
}
/*-------------------------------background-animation---------------------------------------*/
.twinkling {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 95%;
display: block;
}
.twinkling {
position: absolute;
background: transparent url(../img/background/2446101-03.png) repeat top center;
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
-webkit-animation: move-twink-back 16s infinite;
animation: move-twink-back 16s infinite;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#-webkit-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
/*----------------------------------------navbar---------------------------------------------*/
/*-------------header-container-------------*/
header {
height: 3em;
position: fixed;
}
.header-container {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.header-container h1 {
font-family: 'Gabriela', serif;
font-size: 1.5em;
float: left;
padding-top: 5px;
padding-left: 20px;
display: block;
}
/*-------------------menu-------------------*/
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: .7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: #fff;
border: none;
height: 4px;
width: 32px;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
border-radius: 3px;
}
.middle {
top: 10px;
}
.bottom {
top: 20px;
}
.overlay {
z-index: 500;
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
/*---------------------------------------section-1-------------------------------------------*/
#section1 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section1 {
:nth-child(1) {
padding-top: 0px;
display: flex;
}
}
/*------------crystal-animation-------------*/
#crstal-animation {
overflow: hidden;
display: block;
}
.crystal {
width: 23%;
position: absolute;
top: 18%;
left: 40%;
margin: 0;
margin-right: -50%;
transform-style: preserve-3d;
-webkit-animation: rotation 8s infinite linear;
animation: rotation 8s infinite linear;
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
35% {
-webkit-transform: rotate(38deg) rotateX(5deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
65% {
-webkit-transform: rotate(-38deg) rotateX(2deg);
filter: drop-shadow(16px 0px 10px rgb(255, 255, 255, 0.8));
}
86% {
-webkit-transform: rotateX(-20deg) rotateY(1deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
100% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
}
/*---------------------------------------section-2-------------------------------------------*/
#section2 {
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.content {
width: 59%;
background: rgba(0, 0, 0, 0.6);
position: relative;
padding-bottom: 30px;
padding-left: 30px;
display: block;
}
.content p {
width: 88%;
margin: 15px;
text-align: left;
}
.content h2 {
text-align: center;
padding-top: 30px;
}
.crystal-animation {
width: 68%;
float: right;
margin-top: -56%;
margin-right: -80%;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
aside {
display: block;
}
/*---------------------------------------section-3-------------------------------------------*/
#section3 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section3:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
}
/*--------constellation-cards----------*/
.gallery {
list-style: none outside none;
flex-direction: row;
display: flex;
align-content: center;
flex-flow: row wrap;
justify-content: center;
}
h2,
p {
text-align: center;
}
.heading {
text-align: center;
}
.gallery li {
margin: 10px;
}
.gallery li:hover {
transform: scale(1.1)
}
.svg {
width: 75%;
filter: drop-shadow(10px)rgba(0, 0, 0, 0.6);
-moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
}
/*---------------------------------------section-3-content---------------------------------*/
/*------------card-content-------------*/
#section3-content {
flex: 90%;
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.intro h3 {
font-family: 'Gabriela', serif;
}
.content-text {
background: rgba(0, 0, 0, 0.7);
position: relative;
padding-bottom: 30px;
padding-left: 20px;
}
.constellation-img {
opacity: .35;
width: 50%;
float: left;
top: 20%;
position: relative;
}
.constellation-star {
width: 56%;
opacity: 1;
float: left;
left: 1%;
margin-top: 20px;
position: absolute;
}
.intro {
float: right;
width: 50%;
top: 40%;
padding-top: 50px;
padding-right: 100px;
}
.constellation-pattern {
width: 11%;
opacity: .9;
margin-left: -10px;
margin-bottom: -15px;
}
.intro p {
text-align: left;
font-size: 1em;
margin-bottom: 10px;
}
.button {
margin: 0;
padding: 0;
}
.constellation-icon li {
list-style: none;
float: left;
}
.constellation-button {
width: 13%;
/*--------border: 2px solid opacity .3 #fff;
background: opacity .3 #fff;
border-radius: 10px;-----------*/
}
/*----------44--------------------------section-4------------------------------------------*/
#section4 {
height: 100vh;
display: block;
align-content: center;
background: rgba(0, 0, 0, 0.8);
position: relative;
padding: 0;
margin: 0;
}
.s3 {
text-align: left;
}
.s3-content {
width: 74%;
padding-top: 16%;
padding-left: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="twinkling"></div>
<header>
<div class="header-container">
<h1>Constellations</h1>
</div>
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<section id="section1" class="background">
<div id="crystal-animation">
<figure>
<img src="img/crystal.svg" alt="" class="crystal">
</figure>
</div>
</section>
<section id="section2" class="background">
<article class="content">
<h2>What is Constellations?</h2>
<p>Constellations are patterns in the night sky often formed by the most prominent stars to the naked eye. </p>
<p>Constellations often carry names and take the shape of gods, hunters, princesses, objects and mythical beasts associated with Greek mythology – however, at times, it requires quite an imagination to draw out what some constellations are supposed
to represent! </p>
<aside><img src="img/crystal-animation.svg" alt="" class="crystal-animation"></aside>
</article>
</section>
<!-- section-3---->
<section id="section3" class="background">
<h2>12 Constellations</h2>
<p>Click the constellation cards and understand more.</p>
<div class="card">
<ul class="gallery">
<li>
<figcaption>
<img src="img/12-constellation-cards/1.svg" alt="" class="svg">
</figcaption>
</li>
<li>
<img src="img/12-constellation-cards/4.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/7.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/10.svg" alt="" class="svg">
</li>
</ul>
<ul class="gallery">
<li>
<img src="img/12-constellation-cards/2.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/5.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/8.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/11.svg" alt="" class="svg">
</li>
</ul>
<ul class="gallery">
<li>
<img src="img/12-constellation-cards/3.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/6.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/9.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/12.svg" alt="" class="svg">
</li>
</ul>
</div>
</section>
<section id="section3-content" class="background">
<div class="content-text">
<img src="img/12-constellation-pattern/Aries-img.svg" alt="" class="constellation-img"><img src="img/12-constellation-pattern/Aries-star.svg" alt="" class="constellation-star">
<article class="intro">
<img src="img/12-constellation-pattern/Aries-pattern.svg" alt="" class="constellation-pattern">
<h3>Aries</h3>
<p>While one of the biggest, most famous, and oldest named constellations, Aquarius is faint and often hard to find/see. In Greek mythology, Aquarius represented Ganymede, a very handsome young man. Zeus recognized the lad’s good looks, and invited
Ganymede to Mt. Olympus to be the cupbearer of the gods. For his service he was granted eternal youth, as well as a place in the night sky.
</p>
<p>Despite its prominent position and large size, you can see that Aquarius doesn’t really have defining features, nor does it contain any bright stars. The protruding line to the right is Aquarius’s right arm, with the large downward shape being
a combination of the water flowing down out of the vase and his right leg. While not the entire constellation, what’s drawn above is what you’re most likely to see in the night sky. You won’t see this one in the city; you’ll need a dark sky
to find the cupbearer.
</p>
</article>
<div class="button">
<ul class="constellation-icon">
<li>
<img src="img/12-constellation-pattern/Aries-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Leo-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Sagittarius-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Taurus-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Virgo-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Capricorn-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Gemini-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Libra-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Aquarius-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Cancer-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Pisces-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Scorpio-pattern.svg" alt="" class="constellation-button">
</li>
</ul>
</div>
</div>
</section>
<!-- section-4---->
<section id="section4" class="background">
<div class="s3-content">
<h2>How to Find Constellations in the Night Sky?</h2>
<p class="s3">Using a star map will be your best bet for assisting in finding where to look for constellations, depending on your location and time of year. It’s different depending on where you live and on the seasons. You can also need the additional app to
help find the constellations, that lets you enter your location and gives you a customized star map. </p>
<p class="s3">All you need is a dark sky, so as far away from cities as possible, and for extra visual aide, a pair of binoculars or a telescope. With binoculars or a telescope, you’ll see fainter stars and other features like nebulae and star clusters. When
you’re out observing, you’ll want to generally orient yourself towards the North Star.</p>
</div>
</section>

Div is not displaying as expected

HI People I am trying to create a slide from left testinomial but it not coming properly it has two in one row but the third one is coming in place of 4th one and the space of third one is left blank
CSS:
*,
*:before,
*:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*clearfixes*/
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.main-container {
background: #fff;
max-width: 1000px;
line-height: 170%;
margin: 25px auto 25px auto;
position: relative;
}
.container_scroll {
position: relative;
padding: 25px;
}
/*animation element*/
.animation-element {
opacity: 0;
position: relative;
}
/*animation element sliding left*/
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-100px, 0px, 0px);
-webkit-transform: translate3d(-100px, 0px, 0px);
-o-transform: translate(-100px, 0px);
-ms-transform: translate(-100px, 0px);
transform: translate3d(-100px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation slide left styled for testimonials*/
.animation-element.slide-left.testimonial {
float: left;
width: 47%;
margin: 0% 1.5% 3% 1.5%;
background: #F5F5F5;
padding: 15px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}
.animation-element.slide-left.testimonial:nth-of-type(odd) {
width: 48.5%;
margin: 0% 1.5% 3.0% 0%;
}
.animation-element.slide-left.testimonial:nth-of-type(even) {
width: 48.5%;
margin: 0% 0% 3.0% 1.5%;
}
.animation-element.slide-left.testimonial .header{
float: left;
width: 100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .left{
float: left;
margin-right: 15px;
}
.animation-element.slide-left.testimonial .right{
float: left;
}
.animation-element.slide-left.testimonial img {
width: 65px;
height: 65px;
border-radius: 50%;
box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
}
.animation-element.slide-left.testimonial h3 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial h4 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial .content {
float: left;
width:100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .rating{}
.animation-element.slide-left.testimonial i {
color: #aaa;
margin-right: 5px;
}
/*media queries for small devices*/
#media screen and (max-width: 678px){
/*testimonials*/
.animation-element.slide-left.testimonial,
.animation-element.slide-left.testimonial:nth-of-type(odd),
.animation-element.slide-left.testimonial:nth-of-type(even){
width: 100%;
margin: 0px 0px 20px 0px;
}
.animation-element.slide-left.testimonial .right,
.animation-element.slide-left.testimonial .left,
.animation-element.slide-left.testimonial .content,
.animation-element.slide-left.testimonial .rating{
text-align: center;
float: none;
}
.animation-element.slide-left.testimonial img{
width: 85px;
height: 85px;
margin-bottom: 5px;
}
}
HTML:
<div class="container_scroll cf">
<!-- testimonial one -->
<div class="animation-element slide-left testimonial">
<div class="header">
<h3>America's Gold Expert.</h3>
</div>
<div class="content"><i class="fa fa-quote-left"></i> Get the proven trust and experience of our Chief Numismatic Consultant Mike Fuljenz. With nearly 40 years in the numismatic field, he is an award-winning author and noted gold expert; he is also considered one of the world's authorities on coin grading and the rare gold coin market. Contact us for free award winning advice and information. <i class="fa fa-quote-right"></i>
</div>
</div>
<!--testimonial two -->
<div class="animation-element slide-left testimonial">
<div class="header">
<h3>Demand Today. Legacy Tomorrow. </h4>
</div>
<div class="content"><i class="fa fa-quote-left"></i>Our market makes efforts and innovating book distribution strategies create ongoing education, awareness, and demand for Select Four coin types among collectors and investors today supporting the desirability of your collection for your heirs and the collectors of tomorrow.
<i class="fa fa-quote-right"></i>
</div>
</div>
<!--testimonial three -->
<div class="animation-element slide-left testimonial">
<div class="header">
<h3>Expert Recommendations.</h3>
</div>
<div class="content"><i class="fa fa-quote-left"></i> The artistically acclaimed Gold Eagles are essential to any estate collection of U.S. legal tender coins. For many collectors, the $25 Gold Eagle is the key coin, having the lowest total mintage almost every year since 1986.
<i class="fa fa-quote-right"></i>
</div>
</div>
<!--testimonial four -->
<div class="animation-element slide-left testimonial">
<div class="header">
<h3>Professional Buying Team.</h3>
</div>
<div class="content"><i class="fa fa-quote-left"></i> Having a portfolio buying team in your cornerensures that you get advance word on important high-quality coind as they become available which could save you big money on a vital coin purchase while helpig you fill those tough holes in your sets or collection.
<i class="fa fa-quote-right"></i>
</div>
</div>
<!--testimonial five -->
<div class="animation-element slide-left testimonial">
<div class="header">
<h3>Specialized Collection Strategies.</h3>
</div>
<div class="content"><i class="fa fa-quote-left"></i> With an expert in your corner, you'll learn the "inside track" strategies that have served our customers nationwide in building premier collections and completing sets, while acquiring some of the rarest, select Liberty Double Eagles, Indian gold coins and Commemorative gold coins available today.
<i class="fa fa-quote-right"></i>
</div>
</div>
</div>
Script:
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
} else {
$element.removeClass('in-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
</script>

This is not an issue of
clear:left;
The height of each boxes are different. that's why the float is not work well.
please set a min-height related with the largest animation-element height

I'm not 100% sure this is the look you are after, but if you add:
.animation-element.slide-left.testimonial:nth-of-type(odd) { clear: left; }
I think you get closer.

Animating a circular border using Javascript/jQuery [duplicate]

I have searched this website to find progress bars, but the ones I have been able to found show animated circles that go to the full 100%.
I would like it to stop at certain percentages like in the screenshot below. Is there any way I can do that using only CSS?

I created a fiddle using only CSS.
.wrapper {
width: 100px; /* Set the size of the progress bar */
height: 100px;
position: absolute; /* Enable clipping */
clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.circle {
width: 80px;
height: 80px;
border: 10px solid green;
border-radius: 50px;
position: absolute;
clip: rect(0px, 50px, 100px, 0px);
}
/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
-webkit-animation-iteration-count: 1; /* Only run once */
-webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
-webkit-animation-timing-function:linear; /* Linear animation */
}
.wrapper[data-anim~=wrapper] {
-webkit-animation-duration: 0.01s; /* Complete keyframes asap */
-webkit-animation-delay: 3s; /* Wait half of the animation */
-webkit-animation-name: close-wrapper; /* Keyframes name */
}
.circle[data-anim~=left] {
-webkit-animation-duration: 6s; /* Full animation time */
-webkit-animation-name: left-spin;
}
.circle[data-anim~=right] {
-webkit-animation-duration: 3s; /* Half animation time */
-webkit-animation-name: right-spin;
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
#-webkit-keyframes right-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(180deg);
}
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
#-webkit-keyframes left-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
/* Set the wrapper clip to auto, effectively removing the clip */
#-webkit-keyframes close-wrapper {
to {
clip: rect(auto, auto, auto, auto);
}
}
<div class="wrapper" data-anim="base wrapper">
<div class="circle" data-anim="base left"></div>
<div class="circle" data-anim="base right"></div>
</div>
Also check this fiddle here (CSS only)
#import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400);
.arc1 {
width: 160px;
height: 160px;
background: #00a0db;
-webkit-transform-origin: -31% 61%;
margin-left: -30px;
margin-top: 20px;
-webkit-transform: translate(-54px,50px);
-moz-transform: translate(-54px,50px);
-o-transform: translate(-54px,50px);
}
.arc2 {
width: 160px;
height: 160px;
background: #00a0db;
-webkit-transform: skew(45deg,0deg);
-moz-transform: skew(45deg,0deg);
-o-transform: skew(45deg,0deg);
margin-left: -180px;
margin-top: -90px;
position: absolute;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
}
.arc-container:hover .arc2 {
margin-left: -50px;
-webkit-transform: skew(-20deg,0deg);
-moz-transform: skew(-20deg,0deg);
-o-transform: skew(-20deg,0deg);
}
.arc-wrapper {
width: 150px;
height: 150px;
border-radius:150px;
background: #424242;
overflow:hidden;
left: 50px;
top: 50px;
position: absolute;
}
.arc-hider {
width: 150px;
height: 150px;
border-radius: 150px;
border: 50px solid #e9e9e9;
position:absolute;
z-index:5;
box-shadow:inset 0px 0px 20px rgba(0,0,0,0.7);
}
.arc-inset {
font-family: "Josefin Sans";
font-weight: 100;
position: absolute;
font-size: 413px;
margin-top: -64px;
z-index: 5;
left: 30px;
line-height: 327px;
height: 280px;
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0.2));
}
.arc-lowerInset {
font-family: "Josefin Sans";
font-weight: 100;
position: absolute;
font-size: 413px;
margin-top: -64px;
z-index: 5;
left: 30px;
line-height: 327px;
height: 280px;
color: white;
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0.2), rgba(0,0,0,1));
}
.arc-overlay {
width: 100px;
height: 100px;
background-image: linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
background-image: -o-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
padding-left: 32px;
box-sizing: border-box;
-moz-box-sizing: border-box;
line-height: 100px;
font-family: sans-serif;
font-weight: 400;
text-shadow: 0 1px 0 #fff;
font-size: 22px;
border-radius: 100px;
position: absolute;
z-index: 5;
top: 75px;
left: 75px;
box-shadow:0px 0px 20px rgba(0,0,0,0.7);
}
.arc-container {
position: relative;
background: #e9e9e9;
height: 250px;
width: 250px;
}
<div class="arc-container">
<div class="arc-hider"></div>
<div class="arc-inset">
o
</div>
<div class="arc-lowerInset">
o
</div>
<div class="arc-overlay">
35%
</div>
<div class="arc-wrapper">
<div class="arc2"></div>
<div class="arc1"></div>
</div>
</div>
Or this beautiful round progress bar with HTML5, CSS3 and JavaScript.

What about that?
HTML
<div class="chart" id="graph" data-percent="88"></div>
Javascript
var el = document.getElementById('graph'); // get canvas
var options = {
percent: el.getAttribute('data-percent') || 25,
size: el.getAttribute('data-size') || 220,
lineWidth: el.getAttribute('data-line') || 15,
rotate: el.getAttribute('data-rotate') || 0
}
var canvas = document.createElement('canvas');
var span = document.createElement('span');
span.textContent = options.percent + '%';
if (typeof(G_vmlCanvasManager) !== 'undefined') {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
el.appendChild(span);
el.appendChild(canvas);
ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;
var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(0, percent || 1), 1);
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
ctx.strokeStyle = color;
ctx.lineCap = 'round'; // butt, round or square
ctx.lineWidth = lineWidth
ctx.stroke();
};
drawCircle('#efefef', options.lineWidth, 100 / 100);
drawCircle('#555555', options.lineWidth, options.percent / 100);
and CSS
div {
position:relative;
margin:80px;
width:220px; height:220px;
}
canvas {
display: block;
position:absolute;
top:0;
left:0;
}
span {
color:#555;
display:block;
line-height:220px;
text-align:center;
width:220px;
font-family:sans-serif;
font-size:40px;
font-weight:100;
margin-left:5px;
}
http://jsfiddle.net/Aapn8/3410/
Basic code was taken from Simple PIE Chart http://rendro.github.io/easy-pie-chart/

Check this out :)
I made this one using conic-gradient.
background: conic-gradient(
SomeColor1 80%,
SomeColor2 80%
);
You can create a pie chart using conic-gradient.
div {
background: conic-gradient(
red 36deg, orange 36deg 170deg, yellow 170deg);
border-radius: 50%
}
I select only two colors for the pie chart.
background: conic-gradient(
rgb(3, 133, 255) 80%,
rgb(242, 242, 242) 80%
);
then place a div on top of the pie chart to make it looks like a circular progress indicator. Then set progress using HTML DOM innerHTML option.
Then you can use incrementProgress() and decrementProgress() fuctions to change progress dynamically.
Follow my complete example to get some idea :)
You can make upload/download progress indicators, charts for dashboards, etc. using this.
<html>
<head>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}
#progress-spinner {
border-radius: 50%;
height: 100px;
width: 100px;
}
#middle-circle {
position: absolute;
border-radius: 50%;
height: 80px;
width: 80px;
background-color: rgb(248, 248, 248);
display: flex;
align-items: center;
justify-content: center;
font-size: large;
font-weight: bold;
}
</style>
</head>
<body>
<div
style="
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
"
>
<div
style="
position: relative;
display: flex;
justify-content: center;
align-items: center;
"
>
<div id="middle-circle"></div>
<div id="progress-spinner"></div>
</div>
<div style="margin-top: 30px">
<button type="button" id="incbtn">+</button>
<button type="button" id="decbtn">-</button>
</div>
</div>
<script>
var progress = 0;
document
.getElementById("incbtn")
.addEventListener("click", incrementProgress);
document
.getElementById("decbtn")
.addEventListener("click", decrementProgress);
function incrementProgress() {
if (progress != 100) {
progress = progress + 10;
console.log(progress);
setProgress();
}
}
function decrementProgress() {
if (progress != 0) {
progress = progress - 10;
console.log(progress);
setProgress();
}
}
function setProgress() {
document.getElementById("progress-spinner").style.background =
"conic-gradient(rgb(3, 133, 255) " +
progress +
"%,rgb(242, 242, 242) " +
progress +
"%)";
document.getElementById("middle-circle").innerHTML =
progress.toString() + "%";
}
window.onload = function () {
setProgress();
};
</script>
</body>
</html>

Another pure css based solution that is based on two clipped rounded elements that i rotate to get to the right angle:
http://jsfiddle.net/maayan/byT76/
That's the basic css that enables it:
.clip1 {
position:absolute;
top:0;left:0;
width:200px;
height:200px;
clip:rect(0px,200px,200px,100px);
}
.slice1 {
position:absolute;
width:200px;
height:200px;
clip:rect(0px,100px,200px,0px);
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
background-color:#f7e5e1;
border-color:#f7e5e1;
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-o-transform:rotate(0);
transform:rotate(0);
}
.clip2
{
position:absolute;
top:0;left:0;
width:200px;
height:200px;
clip:rect(0,100px,200px,0px);
}
.slice2
{
position:absolute;
width:200px;
height:200px;
clip:rect(0px,200px,200px,100px);
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
background-color:#f7e5e1;
border-color:#f7e5e1;
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-o-transform:rotate(0);
transform:rotate(0);
}
and the js rotates it as required.
quite easy to understand..
Hope it helps,
Maayan

A minimalistic approach using just one element and a couple of attributes:
Use data-progress to define the internal label and --progress to define the progress from 0deg to 360deg.
<div data-progress="36" style="--progress: 36deg;">36%</div>
div {
display: flex;
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(red var(--progress), gray 0deg);
font-size: 0;
}
div::after {
content: attr(data-progress) '%';
display: flex;
justify-content: center;
flex-direction: column;
width: 100%;
margin: 10px;
border-radius: 50%;
background: white;
font-size: 1rem;
text-align: center;
}
<div data-progress="36" style="--progress: 36deg;">36%</div>
Here's a naïve approach to the animation, again all CSS, no JS and just one element:
div {
display: flex;
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(red var(--progress), gray 0deg);
font-size: 0;
animation: .4s ease-out turn_in reverse;
}
div::after {
content: attr(data-progress);
display: flex;
justify-content: center;
flex-direction: column;
width: 100%;
margin: 10px;
border-radius: 50%;
background: white;
font-size: 1rem;
text-align: center;
}
#keyframes turn_in {
5% {
background: conic-gradient(red calc(var(--progress) * .95), gray 0deg);
}
10% {
background: conic-gradient(red calc(var(--progress) * .9), gray 0deg);
}
15% {
background: conic-gradient(red calc(var(--progress) * .85), gray 0deg);
}
20% {
background: conic-gradient(red calc(var(--progress) * .8), gray 0deg);
}
25% {
background: conic-gradient(red calc(var(--progress) * .75), gray 0deg);
}
30% {
background: conic-gradient(red calc(var(--progress) * .7), gray 0deg);
}
35% {
background: conic-gradient(red calc(var(--progress) * .65), gray 0deg);
}
40% {
background: conic-gradient(red calc(var(--progress) * .6), gray 0deg);
}
45% {
background: conic-gradient(red calc(var(--progress) * .55), gray 0deg);
}
50% {
background: conic-gradient(red calc(var(--progress) * .5), gray 0deg);
}
55% {
background: conic-gradient(red calc(var(--progress) * .45), gray 0deg);
}
60% {
background: conic-gradient(red calc(var(--progress) * .4), gray 0deg);
}
65% {
background: conic-gradient(red calc(var(--progress) * .35), gray 0deg);
}
70% {
background: conic-gradient(red calc(var(--progress) * 0.3), gray 0deg);
}
75% {
background: conic-gradient(red calc(var(--progress) * 0.25), gray 0deg);
}
80% {
background: conic-gradient(red calc(var(--progress) * .2), gray 0deg);
}
85% {
background: conic-gradient(red calc(var(--progress) * .15), gray 0deg);
}
90% {
background: conic-gradient(red calc(var(--progress) * .1), gray 0deg);
}
95% {
background: conic-gradient(red calc(var(--progress) * .05), gray 0deg);
}
100% {
background: conic-gradient(gray 0deg);
}
}
<div data-progress="85%" style="--progress: 85%;">85%</div>
Disclaimer: cross-browsing not tested.

A different idea with new #property. See the support table
#property --a {
syntax: '<angle>';
inherits: false;
initial-value: 90deg;
}
.circle {
width: 120px;
height: 120px;
padding: 12px;
box-sizing: border-box;
-webkit-mask:
conic-gradient(#000 var(--a), transparent var(--a)),
linear-gradient(#000, #000) content-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
background: tomato;
border-radius: 50%;
animation: progress 1s .3s linear forwards;
}
#keyframes progress {
to {
--a: 250deg;
}
}
<div class="circle"></div>
And I saw a more powerful example by Alvaro Montoro. Be sure to check this out.

acceding your data you can change process like <div ... data-num="50"> output 50% that go to the show fully animated circles and number.
change in data-num="/* 0-100 */".
you can add multiple process like 5,10.
using Javascript,CSS,Html with animated circle and number.
Output
Code
let items = document.querySelectorAll('.progress-item');
const counters = Array(items.length);
const intervals = Array(items.length);
counters.fill(0);
items.forEach((number,index) => {
intervals[index] = setInterval(() => {
if(counters[index] == parseInt(number.dataset.num)){
clearInterval(intervals[index]);
}else{
counters[index] += 1;
number.style.background = "conic-gradient(red calc(" + counters[index] + "%), gray 0deg)";
number.setAttribute('data-value', counters[index] + "%");
number.innerHTML = counters[index] + "%";
}
}, 15);
});
#progress{
display: flex;
justify-content: space-around;
}
.progress-item {
display: flex;
width: 100px;
height: 100px;
border-radius: 50%;
font-size: 0;
animation: .4s ease-out reverse;
}
.progress-item::after {
content: attr(data-value);
display: flex;
justify-content: center;
flex-direction: column;
width: 100px;
margin: 10px;
border-radius: 50%;
background: white;
font-size: 1rem;
text-align: center;
}
<div id="progress" >
<div data-num="40" class="progress-item">sd</div>
<div data-num="80" class="progress-item">sd</div>
<div data-num="57" class="progress-item">sd</div>
<div data-num="83" class="progress-item">sd</div>
<div data-num="90" class="progress-item">ds</div>
</div>

Flexible SVG solution for radial progress-bar (CSS only): the solution in calculating(via calc) border length of circle inside SVG.
Progress-circle in samples is overlay on element, and may be transparent.
jQuery(function($){
setTimeout(() => $('#element1 [data-role="radial-progress"]').css('--progress-percent', '100'), 1000);
$('#element2 [data-role="radial-progress"]').css('--progress-percent', '80');
$('#element3 [data-role="radial-progress"]').css('--progress-percent', '100');
let progress4 = 0;
let progress4incrementor = setInterval(() => {
progress4++;
$('#element4 .value').html(progress4 + '%');
$('#element4 [data-role="radial-progress"]').css('--progress-percent', progress4.toString());
if (progress4 >= 100) clearInterval(progress4incrementor);
}, 100);
});
.element
{
position: relative;
}
[data-role="radial-progress"]
{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
--progress-percent: 0;
--progress-color: #CC000077;
--progress-bar-width: 100%;
}
[data-role="radial-progress"] > circle
{
stroke-width: var(--progress-bar-width);
stroke-dasharray: calc(100% * 3.141592);
stroke-dashoffset: calc(100% * (100 - var(--progress-percent))/100 * 3.141592);
stroke: var(--progress-color);
}
/*Just for animate --data-percent */
#element1 [data-role="radial-progress"] > circle
{
transition: stroke-dashoffset 4s linear;
}
#element2 [data-role="radial-progress"] > circle
{
transition: stroke-dashoffset 2s linear;
}
#element3 [data-role="radial-progress"] > circle
{
transition: stroke-dashoffset 6s linear;
}
#element4 [data-role="radial-progress"] > circle
{
transition: stroke-dashoffset 0.1s linear;
}
/*Сode that does not depend on radial-progress*/
.element
{
background-image: url(https://static.wikia.nocookie.net/dune/images/2/2f/Duneii-wind-trap.jpg/revision/latest);
background-size: 100% 100%;
display: inline-block;
width: 180px;
height: 110px;
border: 2px solid red;
text-align: center;
color: red;
}
#element3
{
width: 110px;
}
#element3 [data-role="radial-progress"]
{
transform: rotate(-90deg);
}
#element4
{
display: inline-flex;
align-items: center;
justify-content: center;
}
#element4 .value
{
font-size: 2em;
font-weight: bold;
z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element1" class="element">
Content
<svg data-role="radial-progress" width="100%" height="100%" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle r="50%" cx="50%" cy="50%" fill="transparent"></circle></svg>
</div>
<div id="element2" class="element">
Content
<svg style="--progress-percent:30" data-role="radial-progress" width="100%" height="100%" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle r="50%" cx="50%" cy="50%" fill="transparent"></circle></svg>
</div>
<div id="element3" class="element">
Content
<svg style="--progress-bar-width:10px;--progress-color:red;" data-role="radial-progress" width="100%" height="100%" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle r="44%" cx="50%" cy="50%" fill="transparent"></circle></svg>
</div>
<div id="element4" class="element">
<span class="value">0%</span>
<svg data-role="radial-progress" width="100%" height="100%" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle r="50%" cx="50%" cy="50%" fill="transparent"></circle></svg>
</div>

Categories