I want to make three circle spinners spinning around the text and the text inside these spinners will stay still.
I am only allowed to do this with CSS by referring to the .spinner-border in Bootstrap. The HTML file cannot be modified.
.loader-wrapper {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
z-index: 1;
}
#-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
position: relative;
left: auto;
top: auto;
width: 80px;
font-size: 20px;
text-align: center;
display: inline-block;
width: 10rem;
height: 10rem;
vertical-align: text-center;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
<div class="loader-wrapper">
<div class="loader">Loading</div>
</div>
I have tried to make one spinner first. But I don't know how to make the text stay still.
.loader-wrapper {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
z-index: 1;
}
#-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
position: relative;
top: 5px;
left: auto;
width: 80px;
font-size: 20px;
text-align: center;
display: inline-block;
width: 10rem;
height: 10rem;
vertical-align: text-center;
}
.loader::after {
content: '';
position: absolute;
left: 0;
top: -10px;
width: 100%;
height: 100%;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
<div class="loader-wrapper">
<div class="loader">Loading</div>
</div>
Related
I am studying CSS animation. I want my animation moving one by one, as I don't know JS I want to do it by CSS only. How can I do this? I faced the problem of rules from and to in animations, when I change them the animations don't work as expected.
I have the following HTML
body {
margin: 0;
background: grey;
}
main {
font-family: Open Sans;
text-transform: uppercase;
line-height: 1;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.animation {
width: 20em;
height: 4em;
margin: 1em auto;
position: relative;
}
.squares {
margin: auto;
background: red;
/* display: flex;
flex-wrap: wrap;
justify-content: center;*/
}
.small_square {
width: 10px;
height: 10px;
background-color: white;
text-align: center;
display: block;
text-align: center;
position: relative;
margin: 0;
padding: 0;
left: 48%;
animation: appearance_small 1s ease-in-out;
animation: move_around 3s ease-in-out;
*/
}
.big_square {
margin: auto;
width: 40px;
height: 40px;
background-color: black;
display: block;
position: relative;
top: 30px;
animation: appearance_big 1.3s ease-in-out;
animation-delay: 2s;
animation: spin 3s ease-in-out;
forwards;
}
#keyframes appearance_big {
0% {
transform: scale(0%);
}
100% {
opacity: 1;
}
}
#keyframes appearance_small {
0% {
opacity: 0;
transform: scale(0%);
top: 50px;
}
100% {
opacity: 1;
top: 0px;
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
#keyframes move_around {
from {
transform: translate(50%, 50px) rotate(0turn) translate(-50%, -50px);
}
to {
transform: translate(50%, 50px) rotate(0.50turn) translate(-0%, -50px);
}
<main>
<div id="animation" class="animation">
<div class="squares">
<div class="small_square"></div>
<div class="big_square"></div>
</div>
</main>
I need to create this animation
1: https://i.stack.imgur.com/FVvJQ.gif
Original animation is above link, the code must be like that.
Could you please help me with that.
I cannot make correct animation , here is my full code.
Here is my current code.
(.........................................................................................................................................................................................................................................................................................................................)
body {
background-color: #01143B;
}
#keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.8;
}
25% {
opacity: .4;
}
50% {
transform: scale(1.4);
opacity: 0.8;
}
}
div {
background-color: #d4d4d4;
border-radius: 50%;
position: absolute;
margin: auto auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 200px;
}
div:nth-child(1) {
animation: pulse 3s infinite;
}
div:nth-child(2) {
animation: pulse 4s infinite .5s;
}
div:nth-child(3) {
animation: pulse 5s infinite .7s;
}
img {
position: absolute;
margin-left: 70px;
margin-top: 65px;
text-align: center;
font-size: 14px;
line-height: 80px;
width: 70px;
height: 70px;
}
.circle {
background-color: white;
}
<div></div>
<div></div>
<div></div>
<div class="circle"><img src="play-button-arrowhead.png"></div>
I have added a class to each individual DIV to work when built into a design.
It is necessary to have a separate animation timing for each circle
I hope I've been helpful
body {
background-color: #01143B;
}
img {
position: absolute;
margin-left: 43px;
margin-top: 43px;
text-align: center;
font-size: 14px;
line-height: 80px;
width: 70px;
height: 70px;
}
div {
background-color: #d4d4d4;
border-radius: 50%;
position: absolute;
margin: auto auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.1;
}
#keyframes pulse_1 {
10% { transform: scale(1); }
20% { transform: scale(0.95); }
30% { transform: scale(1); }
}
.circle {
background-color: white;
animation: pulse_1 3s infinite 1s;
width: 150px;
height: 150px;
opacity: 1;
}
#keyframes pulse_ca {
15% { transform: scale(1); }
25% { transform: scale(0.95); }
35% { transform: scale(1); }
}
div.ca {
width: 180px;
height: 180px;
animation: pulse_ca 3s infinite 1s;
}
#keyframes pulse_cb {
20% { transform: scale(1); }
30% { transform: scale(0.95); }
40% { transform: scale(1); }
}
div.cb {
width: 210px;
height: 210px;
animation: pulse_cb 3s infinite 1s;
}
#keyframes pulse_cc {
25% { transform: scale(1); }
35% { transform: scale(0.95); }
45% { transform: scale(1); }
}
div.cc {
width: 240px;
height: 240px;
animation: pulse_cc 3s infinite 1s;
}
<div class="cc"></div>
<div class="cb"></div>
<div class="ca"></div>
<div class="circle"><img src="play-button-arrowhead.png"></div>
I have a simple loader animation and I want to add a loading text inside the circle.
As I'm spinning the .slide-loader and my text is inside it I've tried to exclude the .loader-text but it still spins?! how can I fix the loader-text inside the circle?
Here is the code:
.slide-loader:not(.loader-text) {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="slide-loader">
<div class="loader-text">Loading...</div>
</div>
try this code:
.slide-loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="slide-loader">
<div class="spinner"></div>
<div class="loader-text">Loading...</div>
</div>
You can't..as such, if you rotate the parent you rotate the child. You need to rotate the text the other way at the same time.
Then center the text any way you wish, perhaps with flexbox....
.slide-loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
display: flex;
justify-content: center;
align-items: center;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader-text {
animation: spin 2s linear infinite reverse;
}
<div class="slide-loader">
<div class="loader-text">Loading...</div>
</div>
Use an absolutely positioned pseudo-element (::before) for the rotating area, and center the text with a flexbox:
.slide-loader {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
.slide-loader::before {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
animation: spin 2s linear infinite;
content: '';
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="slide-loader">Loading...</div>
The spinner and text can be siblings and you can center both relative to the parent:
.slide-loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
.spinner {
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
box-sizing: border-box;
position: absolute;
/*Center spinner with these 4 lines*/
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
.loader-text {
position: absolute;
/*Center text with these 3 lines*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="slide-loader">
<div class="spinner"></div>
<div class="loader-text">Loading...</div>
</div>
.slide-loader:not(.loader-text) {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div>
<div class="container">
<div class="loader-text">Loading...</div>
<div class="slide-loader">
</div>
</div>
</div>
Hi I made this work around and works perfectly.
<div class="container">
<div class="slide-loader"></div>
<div class="loader-text">Loading...</div>
</div>
.slide-loader{
grid-row: 1/-1;
grid-column: 1/-1;
margin: auto;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.container{
width: 200px;
display: grid;
grid-template-rows: 1fr 20px 1fr;
grid-template-columns: auto 60px auto;
}
.loader-text{
grid-row: 2;
grid-column: 2;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
So, I found this loading screen on the internet and I made a bunch of tweaks to it but I am not sure how to shrink it. Here is my code:
CSS
body {
background-color: #90EE90;
}
#loading-wrapper {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#loading-text {
display: block;
position: absolute;
top: 100%;
left: 100%;
color: #999;
width: 100px;
height: 30px;
margin: -7px 0 0 -45px;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 20px;
}
#loading-content {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 170px;
height: 170px;
margin: -85px 0 0 -85px;
border: 3px solid #F00;
}
#loading-content:after {
content: "";
position: absolute;
border: 3px solid #0F0;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
#loading-content:before {
content: "";
position: absolute;
border: 3px solid #00F;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
}
#loading-content {
border: 3px solid transparent;
border-top-color: #20B2AA;
border-bottom-color: #20B2AA;
border-radius: 50%;
-webkit-animation: loader 3.5s linear infinite;
-moz-animation: loader 3.5s linear infinite;
-o-animation: loader 3.5s linear infinite;
animation: loader 3.5s linear infinite;
}
#loading-content:before {
border: 3px solid transparent;
border-top-color: #778899;
border-bottom-color: #778899;
border-radius: 50%;
-webkit-animation: loader 2.5s linear infinite;
-moz-animation: loader 2.5s linear infinite;
-o-animation: loader 2.5s linear infinite;
animation: loader 3s linear infinite;
}
#loading-content:after {
border: 3px solid transparent;
border-top-color: #84417C;
border-bottom-color: #84417C;
border-radius: 50%;
-webkit-animation: loader 1s linear infinite;
animation: loader 1s linear infinite;
-moz-animation: loader 1.5s linear infinite;
-o-animation: loader 1.5s linear infinite;
}
#-webkit-keyframes loaders {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes loader {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
Transform: rotate (0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#content-wrapper {
color: #FFF;
position: fixed;
left: 0;
top: 20px;
width: 100%;
height: 100%;
}
#header
{
width: 800px;
margin: 0 auto;
text-align: center;
height: 100px;
background-color: #666;
}
#content
{
width: 800px;
height: 1000px;
margin: 0 auto;
text-align: center;
background-color: #888;
}
HTML
<div id="loading-wrapper">
<div id="loading-text">LOADING</div>
<div id="loading-content"></div>
</div>
So, I am trying to get my loading screen to be smaller so it doesn't take up so much of the page please. Thanks in advance!
Change the width, height, and margin inside #loading-content proportionally:
#loading-content {
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
Demo Snippet:
body {
background-color: #90EE90;
}
#loading-wrapper {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#loading-text {
display: block;
position: absolute;
top: 100%;
left: 100%;
color: #999;
width: 100px;
height: 30px;
margin: -7px 0 0 -45px;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 20px;
}
#loading-content {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
border: 3px solid #F00;
}
#loading-content:after {
content: "";
position: absolute;
border: 3px solid #0F0;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
#loading-content:before {
content: "";
position: absolute;
border: 3px solid #00F;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
}
#loading-content {
border: 3px solid transparent;
border-top-color: #20B2AA;
border-bottom-color: #20B2AA;
border-radius: 50%;
-webkit-animation: loader 3.5s linear infinite;
-moz-animation: loader 3.5s linear infinite;
-o-animation: loader 3.5s linear infinite;
animation: loader 3.5s linear infinite;
}
#loading-content:before {
border: 3px solid transparent;
border-top-color: #778899;
border-bottom-color: #778899;
border-radius: 50%;
-webkit-animation: loader 2.5s linear infinite;
-moz-animation: loader 2.5s linear infinite;
-o-animation: loader 2.5s linear infinite;
animation: loader 3s linear infinite;
}
#loading-content:after {
border: 3px solid transparent;
border-top-color: #84417C;
border-bottom-color: #84417C;
border-radius: 50%;
-webkit-animation: loader 1s linear infinite;
animation: loader 1s linear infinite;
-moz-animation: loader 1.5s linear infinite;
-o-animation: loader 1.5s linear infinite;
}
#-webkit-keyframes loaders {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes loader {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
Transform: rotate (0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#content-wrapper {
color: #FFF;
position: fixed;
left: 0;
top: 20px;
width: 100%;
height: 100%;
}
#header
{
width: 800px;
margin: 0 auto;
text-align: center;
height: 100px;
background-color: #666;
}
#content
{
width: 800px;
height: 1000px;
margin: 0 auto;
text-align: center;
background-color: #888;
}
<div id="loading-wrapper">
<div id="loading-text">LOADING</div>
<div id="loading-content"></div>
</div>
I found loader CSS trick, and I want to put text or image into loader without rotation.
.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
text-align: center;
line-height: 50px;
margin: 10px auto;
font-size: 12px;
}
.loader > span {
animation: no-spin .5s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes no-spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
I tried #keyframes no-spin for reverse rotation, but didn't work.
You'll want to add display:block on the <span>. A transform on display:inline will not work (as specified in the spec). In practice this boils down to using display:block or display:inline-block.
I've also modified the animation time of .no-spin to 1s, to match your spin animation speed.
This will give the illusion of not spinning, in actuality it's spinning with the same speed in the opposite direction.
.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
text-align: center;
line-height: 50px;
margin: 10px auto;
font-size: 12px;
}
.loader > span {
display: block;
animation: no-spin 1s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes no-spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
Use the spin on a pseudo element
.loader {
position: relative;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
margin: 10px auto;
font-size: 12px;
}
.loader::after {
content: '';
position: absolute;
top: 0; left: 0;
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 100%;
height: 100%;
box-sizing: border-box;
animation: spin 1s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>