I am aiming an svg-animation for the heartrate-polyline like here https://codepen.io/chriscoyier/pen/bGyoz
But it seems I am doing sth wrong. Do you know whats wrong in this code?
And if you know some technic to make the animation like real heartrate: Always start showing the line from beginning instead of rebuilding it from the end, that would be great! :-)
#heart {
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 9999;
margin-top:10px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #1D74BA;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
svg.heart-rate {
position: absolute;
z-index: 999;
color: white;
fill: currentColor;
left: 213%;
top: 5%;
transform: translate(-50%,-50%) scale(0.85);
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 2s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<div id="heart">
<svg class="heart-rate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="689px" height="359px" viewBox="0 0 689 359" preserveAspectRatio="xMidYMid meet" ><rect id="svgEditorBackground" x="0" y="0" width="689" height="359" style="fill: none; stroke: none;"/><path clas="path" style="stroke:white;fill:none;stroke-width:4px;" id="e1_polyline" d="M106.204 222.314 113.506 219.658 124.126 226.296 130.1 203.728 136.738 222.977 140.721 218.331 155.987 230.943 164.617 207.047 169.927 223.641 176.565 219.658 180.547 224.969 196.478 224.969"/></svg>
</div>
path is an element, not a class. You need to remove the period from your selector.
.path { ... } becomes path { ... }
#heart {
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 9999;
margin-top:10px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #1D74BA;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
svg.heart-rate {
position: absolute;
z-index: 999;
color: white;
fill: currentColor;
left: 213%;
top: 5%;
transform: translate(-50%,-50%) scale(0.85);
}
path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 2s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<div id="heart">
<svg class="heart-rate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="689px" height="359px" viewBox="0 0 689 359" preserveAspectRatio="xMidYMid meet" ><rect id="svgEditorBackground" x="0" y="0" width="689" height="359" style="fill: none; stroke: none;"/><path clas="path" style="stroke:white;fill:none;stroke-width:4px;" id="e1_polyline" d="M106.204 222.314 113.506 219.658 124.126 226.296 130.1 203.728 136.738 222.977 140.721 218.331 155.987 230.943 164.617 207.047 169.927 223.641 176.565 219.658 180.547 224.969 196.478 224.969"/></svg>
</div>
If this was my code, I would change the animation slightly...
#heart {
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 9999;
margin-top:10px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #1D74BA;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
svg.heart-rate {
position: absolute;
z-index: 999;
color: white;
fill: currentColor;
left: 213%;
top: 5%;
transform: translate(-50%,-50%) scale(0.85);
}
path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: dash 4s linear infinite;
}
#keyframes dash {
0% {
stroke-dashoffset: 500;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -500;
}
}
<div id="heart">
<svg class="heart-rate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="689px" height="359px" viewBox="0 0 689 359" preserveAspectRatio="xMidYMid meet" ><rect id="svgEditorBackground" x="0" y="0" width="689" height="359" style="fill: none; stroke: none;"/><path clas="path" style="stroke:white;fill:none;stroke-width:4px;" id="e1_polyline" d="M106.204 222.314 113.506 219.658 124.126 226.296 130.1 203.728 136.738 222.977 140.721 218.331 155.987 230.943 164.617 207.047 169.927 223.641 176.565 219.658 180.547 224.969 196.478 224.969"/></svg>
</div>
Related
We want to animate our logo which is working so far but I dont know how to make those gears appearing like trapeze? Also how to adjust this heartbeat line so its similar to the real log?
I know how to make a trapeze as there are lot of ready code snippets in the internet, but I am struggling to integrate this here.
.parent {
position:relative;
transform: scale(0.4);
}
.gear {
position: relative;
width: 200px;
height: 200px;
margin: auto;
background: black;
border-radius: 50%;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.gear .center {
position: absolute;
top: 25px;
left: 25px;
z-index: 10;
width: 150px;
height: 150px;
background: #fff;
border-radius: 50%;
}
.tooth {
position: absolute;
top: -25px;
left: 75px;
z-index: 1;
width: 45px;
height: 250px;
background: black;
}
.tooth:nth-child(2) {
transform: rotate(45deg);
}
.tooth:nth-child(3) {
transform: rotate(90deg);
}
.tooth:nth-child(4) {
transform: rotate(135deg);
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#heart {
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 9999;
margin-top:10px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #1D74BA;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
svg.heart-rate {
position: absolute;
z-index: 999;
color: white;
fill: currentColor;
left: 50%;
top: 40%;
transform: translate(-50%,-50%) scale(0.6);
}
<div class="parent">
<div id="heart">
<svg class="heart-rate" ersion="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="73px" viewBox="0 0 150 73" enable-background="new 0 0 150 73" xml:space="preserve">
<polyline fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" points="0,45.486 38.514,45.486 44.595,33.324 50.676,45.486 57.771,45.486 62.838,55.622 71.959,9 80.067,63.729 84.122,45.486 97.297,45.486 103.379,40.419 110.473,45.486 150,45.486"
/>
</svg>
</div>
<div class="gear">
<div class="center"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
</div>
<br>
</div>
Achieved the trapeze with CSS gradient. You can use 4 gradients at 4 corners with appropriate angles to make it look like a trapeze.
.tooth {
background: linear-gradient(70deg, transparent 10px, #000 10px),
linear-gradient(-70deg, transparent 10px, #000 10px),
linear-gradient(250deg, transparent 10px, #000 10px),
linear-gradient(110deg, transparent 10px, #000 10px);
background-position: bottom left, bottom right, top right, top left;
background-size: 55% 55%;
background-repeat: no-repeat;
}
Full working snippet:
.parent {
position: relative;
transform: scale(0.4);
}
.gear {
position: relative;
width: 200px;
height: 200px;
margin: auto;
background: black;
border-radius: 50%;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.gear .center {
position: absolute;
top: 25px;
left: 25px;
z-index: 10;
width: 150px;
height: 150px;
background: #fff;
border-radius: 50%;
}
.tooth {
position: absolute;
top: -25px;
left: 75px;
z-index: 1;
width: 45px;
height: 250px;
background: linear-gradient(70deg, transparent 10px, #000 10px), linear-gradient(-70deg, transparent 10px, #000 10px), linear-gradient(250deg, transparent 10px, #000 10px), linear-gradient(110deg, transparent 10px, #000 10px);
background-position: bottom left, bottom right, top right, top left;
background-size: 55% 55%;
background-repeat: no-repeat;
}
.tooth:nth-child(2) {
transform: rotate(45deg);
}
.tooth:nth-child(3) {
transform: rotate(90deg);
}
.tooth:nth-child(4) {
transform: rotate(135deg);
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#heart {
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
margin-top: 10px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #1D74BA;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
svg.heart-rate {
position: absolute;
z-index: 999;
color: white;
fill: currentColor;
left: 50%;
top: 40%;
transform: translate(-50%, -50%) scale(0.6);
}
<div class="parent">
<div id="heart">
<svg class="heart-rate" ersion="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="73px" viewBox="0 0 150 73" enable-background="new 0 0 150 73" xml:space="preserve">
<polyline fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" points="0,45.486 38.514,45.486 44.595,33.324 50.676,45.486 57.771,45.486 62.838,55.622 71.959,9 80.067,63.729 84.122,45.486 97.297,45.486 103.379,40.419 110.473,45.486 150,45.486"
/>
</svg>
</div>
<div class="gear">
<div class="center"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
</div>
<br>
</div>
Couldnt find a good solution for the trapeze but created a nice animated svg polyline:
.parent {
position:relative;
transform: scale(0.4);
}
.gear {
position: relative;
width: 200px;
height: 200px;
margin: auto;
background: black;
border-radius: 50%;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.gear .center {
position: absolute;
top: 25px;
left: 25px;
z-index: 10;
width: 150px;
height: 150px;
background: #fff;
border-radius: 50%;
}
.tooth {
position: absolute;
top: -25px;
left: 75px;
z-index: 1;
width: 45px;
height: 250px;
background: black;
}
.tooth:nth-child(2) {
transform: rotate(45deg);
}
.tooth:nth-child(3) {
transform: rotate(90deg);
}
.tooth:nth-child(4) {
transform: rotate(135deg);
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#heart {
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 9999;
margin-top:10px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #1D74BA;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
svg.heart-rate {
position: absolute;
z-index: 999;
color: white;
fill: currentColor;
left: 213%;
top: 5%;
transform: translate(-50%,-50%) scale(0.85);
}
path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: dash 4s linear infinite;
}
#keyframes dash {
0% {
stroke-dashoffset: 500;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -500;
}
}
<div class="parent">
<div id="heart">
<svg class="heart-rate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="689px" height="359px" viewBox="0 0 689 359" preserveAspectRatio="xMidYMid meet" ><rect id="svgEditorBackground" x="0" y="0" width="689" height="359" style="fill: none; stroke: none;"/><path style="stroke:white;fill:none;stroke-width:4px;" id="e1_polyline" d="M106.204 222.314 113.506 219.658 124.126 226.296 130.1 203.728 136.738 222.977 140.721 218.331 155.987 230.943 164.617 207.047 169.927 223.641 176.565 219.658 180.547 224.969 196.478 224.969"/></svg>
</div>
<div class="gear">
<div class="center"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
</div>
</div>
This is our logo:
We would like to create it with css and animate the gear, but as you can see if you run my code, I am struggling with following:
heart is not within the gear
if I put div of heart in the gear its animating to, but only the gear should animate
currently the heart-rate (blue line) isnt done with css, cause I dont know how to solve this
Do you know how to solve this?
body{background: #fff;}
.parent{
display: flex;
height: 500px;
}
.gear{
position: relative;
width: 200px;
height: 200px;
margin: auto;
background: black;
border-radius: 50%;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.gear .center{
position: absolute;
top: 25px;
left: 25px;
z-index: 10;
width: 150px;
height: 150px;
background: #fff;
border-radius: 50%;
}
.tooth{
position: absolute;
top: -25px;
left: 75px;
z-index: 1;
width: 45px;
height: 250px;
background:black;
}
.tooth:nth-child(2){
transform: rotate(45deg);
}
.tooth:nth-child(3){
transform: rotate(90deg);
}
.tooth:nth-child(4){
transform: rotate(135deg);
}
#keyframes spin {
from {transform: rotate(0deg); }
to {transform: rotate(360deg);}
}
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #1D74BA;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
svg.heart-rate{
position: absolute;
z-index:999;
transform: scale(0.6);
color:white;
fill: currentColor;
}
<div class="parent">
<div id="heart">
<svg class="heart-rate" ersion="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="73px" viewBox="0 0 150 73" enable-background="new 0 0 150 73" xml:space="preserve">
<polyline fill="none" stroke="#009B9E" stroke-width="3" stroke-miterlimit="10" points="0,45.486 38.514,45.486 44.595,33.324 50.676,45.486 57.771,45.486 62.838,55.622 71.959,9 80.067,63.729 84.122,45.486 97.297,45.486 103.379,40.419 110.473,45.486 150,45.486"
/>
</svg>
</div>
<div class="gear">
<div class="center"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
</div>
</div>
Use position:absolute on the heart and position it in the center of the parent using top,left and transform
body {
background: #fff;
}
.parent {
display: flex;
height: 500px;
position:relative;
}
.gear {
position: relative;
width: 200px;
height: 200px;
margin: auto;
background: black;
border-radius: 50%;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.gear .center {
position: absolute;
top: 25px;
left: 25px;
z-index: 10;
width: 150px;
height: 150px;
background: #fff;
border-radius: 50%;
}
.tooth {
position: absolute;
top: -25px;
left: 75px;
z-index: 1;
width: 45px;
height: 250px;
background: black;
}
.tooth:nth-child(2) {
transform: rotate(45deg);
}
.tooth:nth-child(3) {
transform: rotate(90deg);
}
.tooth:nth-child(4) {
transform: rotate(135deg);
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#heart {
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 9999;
margin-top:10px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #1D74BA;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
svg.heart-rate {
position: absolute;
z-index: 999;
color: white;
fill: currentColor;
left: 50%;
top: 40%;
transform: translate(-50%,-50%) scale(0.6);
}
<div class="parent">
<div id="heart">
<svg class="heart-rate" ersion="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="73px" viewBox="0 0 150 73" enable-background="new 0 0 150 73" xml:space="preserve">
<polyline fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" points="0,45.486 38.514,45.486 44.595,33.324 50.676,45.486 57.771,45.486 62.838,55.622 71.959,9 80.067,63.729 84.122,45.486 97.297,45.486 103.379,40.419 110.473,45.486 150,45.486"
/>
</svg>
</div>
<div class="gear">
<div class="center"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
</div>
</div>
I would like to use the progress-bar here at https://bootsnipp.com/snippets/featured/circle-progress-bar, but I don't know how to set less than 50% when you have 2, 3 or more types (each got different percentage) of these on your website, because this code sets right-side of bar for every type u got there and I don't know what to do when I want less than 50% only at 3.
Type of bar:
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
+
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
Could someone help me please ?
Using SVG
svg {
transform: rotate(-90deg);
stroke-dasharray: 251; /* (2PI * 40px) */
stroke-dashoffset: 251;
animation: offsettozero 5s linear forwards;
}
#keyframes offsettozero {
to {
stroke-dashoffset: 0;
}
}
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="#428bca" stroke-width="6" fill="#333" />
</svg>
<!-- VV Click "Run code snippet" for demo -->
Since the right-side animation is shared among all the progress circles, if you want to make one that is less than 50%, you'll have to override that generic style. Then you won't need a left-side animation.
So your CSS would be something like:
.progress.yourDiv .progress-right .progress-bar {
animation: yourAnimation 1.8s linear forwards;
}
.progress.yourDiv .progress-left .progress-bar{
animation: none;
}
Where yourAnimation is the same as the shared right-side rule for .progress .progress-right .progress-bar in the Bootstrap example, except the name is changed.
For an animation to 37.5%, yourAnimation would look like this:
#keyframes yourAnimation{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
Here's an example, where .yourDiv is .yellow and yourAnimation is loading-3.
.progress {
width: 150px;
height: 150px !important;
float: left;
line-height: 150px;
background: none;
margin: 20px;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress>span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value {
width: 90%;
height: 90%;
border-radius: 50%;
background: #44484b;
font-size: 24px;
color: #fff;
line-height: 135px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar {
border-color: #049dff;
}
.progress.blue .progress-left .progress-bar {
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar {
border-color: #fdba04;
}
.progress.yellow .progress-right .progress-bar {
animation: loading-3 1.8s linear forwards;
}
.progress.yellow .progress-left .progress-bar {
animation: none;
}
#keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress yellow">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">37.5%</div>
</div>
</div>
How to use background image inside instead of background color (green)?
I want to use the image inside and on the sides leaving a white border
The problem is that when insert the image, it does not cover the entire area inside.
*, *:after, *:before {
box-sizing: border-box;
}
body {
background: rgba(128, 128, 128, 0.37);
margin: 0px;
padding: 0px;
}
.xpt {
text-align: center;
}
.xpt-hex {
position: relative;
z-index: 0;
color: #fff;
display: inline-block;
margin: 80px 5px 75px 5px;
}
.xpt-hex:before {
content: "";
position: absolute;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.xpt-hex, .xpt-hex:after, .xpt-hex:before {
width: 229px;
height: 143px;
background: #fff;
text-align: justify;
border-radius: 15px;
}
.xpt-ihex {
position: absolute;
z-index: 1;
left: 12px;
right: 12px;
top: 6px;
bottom: 6px;
}
.xpt-ihex, .xpt-ihex:after, .xpt-ihex:before {
background: #adcf24;
border-radius: 15px;
}
.xpt-ihex:after, .xpt-ihex:before {
width: 100%;
height: 100%;
}
.xpt-ihex:before {
content: "";
position: absolute;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.xpt-ihex:after {
content: "";
position: absolute;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.xpt-box-inr {
z-index: 2;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.xpt-hex:after {
content: "";
position: absolute;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
<div class="xpt">
<div class="xpt-hex">
<div class="xpt-ihex">
<div class="xpt-box-inr"></div>
</div>
</div>
</div>
svg works
body{background: grey;}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="135px" height="100%" viewBox="87.5 87.5 65 73" xml:space="preserve" preserveAspectRatio="xMidYMid">
<defs>
<pattern id="ashex-img" height="100%" width="150px" patternContentUnits="objectBoundingBox" preserveAspectRatio="xMidYMid slice">
<image height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://screenwriter.kinoscenariy.net/wp-content/uploads/2013/07/boy-102832_1920-150x150.jpg"></image>
</pattern>
</defs>
<path fill="url(#ashex-img)" stroke="white" stroke-width="2" d="M146.38,105.483l-23.467-13.498c-0.785-0.452-1.819-0.7-2.912-0.7c-1.094,0-2.128,0.249-2.911,0.7 L93.62,105.483c-1.605,0.922-2.911,3.173-2.911,5.018v26.99c0,1.847,1.306,4.1,2.91,5.024l23.472,13.5 c0.784,0.45,1.817,0.699,2.909,0.699c1.091,0,2.125-0.249,2.913-0.699l23.468-13.5c1.605-0.927,2.912-3.18,2.912-5.024v-26.99 C149.293,108.658,147.985,106.406,146.38,105.483z"></path>
</svg>
TRY THIS FIDDLE
Fiddle example for hexagon with background image
using pseudo elements
I've been trying to get a simple CSS animation to work. Check this link here for the demo.
In Firefox it works fine, but I can't get it to work in Chrome/Safari.
My CSS code is ~
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #00cae9;
position: absolute;
transform: rotate(-45deg);
left: 50%;
margin: -20px 0 0 -20px;
}
.pin:after {
content: "";
width: 14px;
height: 14px;
margin: 8px 0 0 8px;
background: #e6e6e6;
position: absolute;
border-radius: 50%;
}
.bounce {
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 1s;
}
.pulse {
background: #d6d4d4;
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
left: 50%;
margin: 11px 0px 0px -12px;
transform: rotateX(55deg);
z-index: -2;
}
.pulse:after {
content: "";
border-radius: 50%;
height: 40px;
width: 40px;
position: absolute;
margin: -13px 0 0 -13px;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
opacity: 0;
box-shadow: 0 0 1px 2px #00cae9;
animation-delay: 1.1s;
}
#keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
opacity: 0;
}
}
#-webkit-keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
opacity: 0;
}
}
#keyframes bounce {
0% {
opacity: 0;
transform: translateY(-2000px) rotate(-45deg);
-webkit-transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
transform: translateY(30px) rotate(-45deg);
-webkit-transform: translateY(30px) rotate(-45deg);
}
80% {
transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
}
100% {
transform: translateY(0) rotate(-45deg);
-webkit-transform: translateY(0) rotate(-45deg);
}
}
#-webkit-keyframes bounce {
0% {
opacity: 0;
transform: translateY(-2000px) rotate(-45deg);
-webkit-transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
transform: translateY(30px) rotate(-45deg);
-webkit-transform: translateY(30px) rotate(-45deg);
}
80% {
transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
}
100% {
transform: translateY(0) rotate(-45deg);
-webkit-transform: translateY(0) rotate(-45deg);
}
}
Can anyone point out where I'm going wrong?
You forgot to add -webkit- to your animation and transform. Check this fiddle in chrome its working http://jsfiddle.net/Gt4rP/2/
CSS
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #00cae9;
position: absolute;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
left: 50%;
margin: -20px 0 0 -20px;
}
.pin:after {
content: "";
width: 14px;
height: 14px;
margin: 8px 0 0 8px;
background: #e6e6e6;
position: absolute;
border-radius: 50%;
}
.bounce {
-webkit-animation-name: bounce;
-webkit-animation-fill-mode: both;
-webkit-animation-duration: 1s;
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 1s;
}
.pulse {
background: #d6d4d4;
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
left: 50%;
margin: 11px 0px 0px -12px;
transform: rotateX(55deg);
-webkit-transform: rotateX(55deg);
z-index: -2;
}
.pulse:after {
content: "";
border-radius: 50%;
height: 40px;
width: 40px;
position: absolute;
margin: -13px 0 0 -13px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0;
box-shadow: 0 0 1px 2px #00cae9;
-webkit-animation-delay: 1.1s;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
animation-delay: 1.1s;
}