I have this code in my project:
body {
background-color: #312a50;
font-family: Helvetica Neue;
color: white;
}
html,
body {
height: 100%;
}
.main {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.t1 {
width: 0;
height: 0;
margin: auto;
border-right: 50px solid transparent;
border-bottom: 86.6px solid blue;
border-left: 50px solid transparent;
}
#-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
<div class="main">
<div style="text-align: center;" class="wrapper">
<div class="t1 rotating"></div>
</div>
</div>
My triangle currently rotates fine, and at the right speed, but it isn't rotating at the centre point of the triangle. It seems to rotate from a point slightly off from the centre.
Also, how do I show only the border of the triangle and not the full solid blue?
Any help would be greatly appreciated!
Thank you!
You need to adjust the transform-origin to 50% 66%
body {
background-color: #312a50;
font-family: Helvetica Neue;
color: white;
}
html,
body {
height: 100%;
}
.main {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.t1 {
width: 0;
height: 0;
margin: auto;
border-right: 50px solid transparent;
border-bottom: 86.6px solid blue;
border-left: 50px solid transparent;
transform-origin: 50% 66%;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating {
animation: rotating 2s linear infinite;
}
<div class="main">
<div style="text-align: center;" class="wrapper">
<div class="t1 rotating"></div>
</div>
</div>
Related
Any ideas of what is happening here? Why does the purple box position itself outside the spinner for a moment there?
This is my css and rotate animation:
.spinner {
display: flex;
align-items: center;
justify-content: center;
background-color: red;
}
.spinner-ball {
border: 2px solid blue;
border-bottom-color: transparent;
border-radius: 100%;
height: 26px;
width: 26px;
background: transparent !important;
display: inline-block;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
animation: rotate 1s linear infinite;
-webkit-animation: rotate 1s linear infinite;
}
#keyframes rotate {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
<div class="spinner">
<div class="spinner-ball" />
</div>
I am working on circular progress bar using HTML & CSS. HTML content is under for loop. Here, I tried with same 5% but the result of progress is different
.progress{
width: 120px;
height: 120px;
line-height: 120px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 15px solid #f2f5f5;
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: 100%;
height: 100%;
font-size: 14px;
font-weight: bold;
text-align: center;
position: absolute;
}
.progress .progress-value.red {
color: #f74d4d;
}
.progress .progress-value.dark-yellow {
color: #f78c4d;
}
.progress .progress-value.yellow {
color: #f7f24d;
}
.progress .progress-value.green {
color: #28b779;
}
.progress.red .progress-bar{
border-color: #f74d4d;
}
.progress.red .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.dark-yellow .progress-bar{
border-color: #f78c4d;
}
.progress.dark-yellow .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color:#f7f24d;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.green .progress-bar{
border-color: #28b779;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
.progress > span {
background-color: 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(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px){
.progress{ margin-bottom: 20px; }
}
<div class="component-progress-info">
<div class="component-progress">
<div class="progress <?php echo $componentclass; ?>">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value red">5%</div>
</div>
</div>
<div class="component-info">
</div>
</div>
I have html inside a for-loop. But it is resulting me different response
Looking at the CSS (just the relevant parts):
.progress.red .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.dark-yellow .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
Different colors are set to use different keyframes, for example loading-3 for yellow, loading-5 for green, as seen above.
The keyframes then are defined with different rotations. Looking at two of them as an example:
#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(90deg);
transform: rotate(90deg);
}
}
Here loading-2 transforms from 0deg to 144deg.
Below loading-3 transforms from 0deg to 90deg.
Should the keyframes not be the same for every progress bar? Only the background color should change. But you define different keyframes for different colors, which is probably the cause if not part of it.
Problem
I've made a simple css animation, but it's not behaving as I expect it.
The idea is for the animation to draw a straight line (from top downwards) , and the disappear (also from the top downwards).
The start of the line moves down a bit, as the animation starts, then up again to stay at set position (same goes for the bottom at the end of the animation).
Question
How do I get the start of the line to stay at one position instead of 'bouncing' down and up?
Expected behavior
Actual behavior
Code
.lineWrapper {
width: 1px;
height: 300px;
margin: auto;
position: relative;
}
.lineWrapper .line {
width: 100%;
height: 100%;
background: #000;
animation: scrollLine 5s linear infinite;
}
#keyframes scrollLine {
0% {
transform: scaleY(0);
}
10% {
transform: scaleY(0);
transform-origin: top;
}
30% {
transform: scaleY(1);
}
70% {
transform: scaleY(1);
}
90% {
transform: scaleY(0);
transform-origin: bottom;
}
100% {
transform: scaleY(0);
}
}
<div class="lineWrapper">
<div class="line"></div>
</div>
Codepen
https://codepen.io/strazan/pen/RwPYgjq
The default transform-origin is center so if you omit it in the initial and last state it will be set to center. You need to also have an instant change of the transform-origin in the middle:
.lineWrapper {
width: 1px;
height: 300px;
margin: auto;
position: relative;
}
.line {
height: 100%;
background: #000;
animation: scrollLine 5s infinite;
}
#keyframes scrollLine {
0%,10% {
transform: scaleY(0);
transform-origin: top;
}
49.9% {
transform: scaleY(1);
transform-origin: top;
}
50% {
transform: scaleY(1);
transform-origin: bottom;
}
90%,100% {
transform: scaleY(0);
transform-origin: bottom;
}
}
<div class="lineWrapper">
<div class="line"></div>
</div>
I have made similar CSS animation with some different code lines.
body {
margin: 0px;
display: flex;
justify-content: center;
background: black;
overflow: hidden;
}
.line-wrapper {
height: 800px;
width: 8px;
background: tranparent;
display: flex;
justify-content: center;
animation: down 2s linear infinite;
}
#keyframes down {
0% {
transform: translateY(0px);
}
15% {
transform: translateY(0px);
}
30% {
transform: translateY(0px);
}
60% {
transform: translateY(90px);
}
90% {
transform: translateY(115px);
}
100% {
transform: translateY(115px);
}
}
.line {
height: 8px;
width: 4px;
background: Gray;
animation: scrollLine 2s ease-in-out infinite;
}
#keyframes scrollLine {
100% {
height: 800px;
}
}
.eraser {
height: 0px;
width: 4px;
background: black;
animation: rmv 2s linear infinite;
}
#keyframes rmv {
55% {
height: 0px;
}
100% {
height: 800px;
}
}
<div class="line-wrapper">
<div class="line">
<div class="eraser"></div>
</div>
</div>
I have this loader:
.loader_ajax_small {
border: 2px solid #f3f3f3 !important;
border-radius: 50%;
border-top: 2px solid #2D2D2D !important;
width: 29px;
height: 29px;
-webkit-animation: spin_loader_ajax_small 2s linear infinite;
animation: spin_loader_ajax_small 2s linear infinite;
}
#-webkit-keyframes spin_loader_ajax_small {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin_loader_ajax_small {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
But I can't understand how I can center horizontally inside a div, for example:
As you can see is on the left but I want it centered, how can I do it?
Added margin: 0 auto; in .loader_ajax_small for center in parent div
.loader {
border: 1px solid #ccc;
padding: 20px;
}
.loader_ajax_small {
border: 2px solid #f3f3f3 !important;
border-radius: 50%;
border-top: 2px solid #2D2D2D !important;
width: 29px;
height: 29px;
margin: 0 auto;
-webkit-animation: spin_loader_ajax_small 2s linear infinite;
animation: spin_loader_ajax_small 2s linear infinite;
}
#-webkit-keyframes spin_loader_ajax_small {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin_loader_ajax_small {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader">
<div class="loader_ajax_small"></div>
</div>
or with display: flex;
.loader {
border: 1px solid #ccc;
padding: 20px;
display: flex;
justify-content: center;
}
.loader_ajax_small {
border: 2px solid #f3f3f3 !important;
border-radius: 50%;
border-top: 2px solid #2D2D2D !important;
width: 29px;
height: 29px;
-webkit-animation: spin_loader_ajax_small 2s linear infinite;
animation: spin_loader_ajax_small 2s linear infinite;
}
#-webkit-keyframes spin_loader_ajax_small {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin_loader_ajax_small {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader">
<div class="loader_ajax_small"></div>
</div>
set your loader margin to auto
something like this
margin:10px auto;
Add margin:0 auto; in .loader_ajax_small property.
.loader_ajax_small {
border: 2px solid #f3f3f3 !important;
border-radius: 50%;
border-top: 2px solid #2D2D2D !important;
width: 29px;
height: 29px;
margin:0 auto;
-webkit-animation: spin_loader_ajax_small 2s linear infinite;
animation: spin_loader_ajax_small 2s linear infinite;
}
#-webkit-keyframes spin_loader_ajax_small {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin_loader_ajax_small {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader_ajax_small"></div>
I have a spinner that I am using for a long running operation but I cannot get it to spin. I have read the other SO questions related to this but none of them seem to get my scenario working.
I have the following HTML
<div class="ms-BasicSpinner">
<div class="ms-Spinner">
<div class="ms-Spinner-circle ms-Spinner--large"></div>
<div class="ms-Spinner-label">Creating...</div>
</div>
</div>
and CSS
.ms-Spinner > .ms-Spinner-circle.ms-Spinner--large {
width: 28px;
height: 28px;
}
.ms-Spinner > .ms-Spinner-circle {
margin: auto;
box-sizing: border-box;
border-radius: 50%;
width: 100%;
height: 100%;
border: 1.5px solid #c7e0f4;
border-top-color: #0078d7;
-webkit-animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
}
.ms-Spinner > .ms-Spinner-label {
color: #0078d7;
margin-top: 10px;
text-align: center;
}
.ms-BasicSpinner .ms-Spinner {
display: inline-block;
margin: 10px 0;
}
I also have to following JSFiddle https://jsfiddle.net/20ufspze/
What am I missing to get the spinner to spin?
Any help much appreciated
Thanks in advance
You apply the cubic bezier function to a rotation to get the desired effect. Adapting the bottom element here you can rotate the blue part with:
#-webkit-keyframes ms-Spinner-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes ms-Spinner-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
And by rewriting the cubic-bezier part as:
-webkit-animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
Best practice to animate any HTML component is use animation keyframes in CSS.
#keyframes anim {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
...
.ms-Spinner > .ms-Spinner-circle {
margin: auto;
box-sizing: border-box;
border-radius: 50%;
width: 100%;
height: 100%;
border: 1.5px solid #c7e0f4;
border-top-color: #0078d7;
animation: anim 1.3s infinite;
}
...
Fiddle Link : https://jsfiddle.net/8Ly697ne/