I'm trying to convert this button in responsive but i don't know how, i want this 4 button display verticaly aligned only on mobile. I didn't find any site for this problem :(. Thank you for all the answer!
.rainbow {
position: absolute;
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
z-index: 1;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
-webkit-animation: rainbow 7s ease infinite;
-z-animation: rainbow 7s ease infinite;
-o-animation: rainbow 7s ease infinite;
animation: rainbow 7s ease infinite;
mix-blend-mode: screen;
}
.bottoni {
float: center;
margin: 0 auto;
text-align: center;
margin-top: 7%;
}
.bottone {
display: inline-block;
position: relative;
padding-top: 17px;
text-align: center;
font-family: sans-serif;
width: 100% auto;
font-weight: bold;
margin-right: 20px;
margin-left: 20px;
text-transform: uppercase;
width: 200px;
height: 35px;
border: 3px solid black;
background: white;
transform: 1s;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-animation: bottoni 1s ease 0s 1 normal ;
animation: bottoni 1s ease 0s 1 normal ;
}
.bottone:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
.bottone:hover, .bottone:focus, .bottone:active {
cursor: pointer;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
.bottone:hover:before, .bottone:focus:before, .bottone:active:before {
opacity: 1;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
/* Animation */
#-webkit-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-moz-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-o-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
<div class="bottoni">
<a class="bottone">
Votaci
<div class="rainbow"></div>
</a>
<a class="bottone">
forum
<div class="rainbow"></div>
</a>
<a class="bottone">
regolamento
<div class="rainbow"></div>
</a>
<a class="bottone">
shop
<div class="rainbow"></div>
</a>
</div>
All answer are apprecited
You could use absolute position on mobile on .bottoni to center your menu verticaly, for the responsive use media queries :
#media (max-width: 480px) {
.bottoni {
top: 50%; /* adjust to your needs */
position: absolute;
left: 0;
right: 0;
}
}
see the : https://jsfiddle.net/s0smLw16/
Try adding a #media selector to your css.
#media screen and (max-width: 1000px) {
a.btn {
display: block;
}
}
Example: https://jsfiddle.net/qpe2xoem/1/
.rainbow {
position: absolute;
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
z-index: 1;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
-webkit-animation: rainbow 7s ease infinite;
-z-animation: rainbow 7s ease infinite;
-o-animation: rainbow 7s ease infinite;
animation: rainbow 7s ease infinite;
mix-blend-mode: screen;
}
.bottoni {
float: center;
margin: 0 auto;
text-align: center;
margin-top: 7%;
}
.bottone {
display: inline-block;
position: relative;
padding-top: 17px;
text-align: center;
font-family: sans-serif;
width: 100% auto;
font-weight: bold;
margin-right: 20px;
margin-left: 20px;
text-transform: uppercase;
width: 200px;
height: 35px;
border: 3px solid black;
background: white;
transform: 1s;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-animation: bottoni 1s ease 0s 1 normal ;
animation: bottoni 1s ease 0s 1 normal ;
}
.bottone:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
.bottone:hover, .bottone:focus, .bottone:active {
cursor: pointer;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
.bottone:hover:before, .bottone:focus:before, .bottone:active:before {
opacity: 1;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
/* Animation */
#-webkit-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-moz-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-o-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#media only screen and (min-width: 480px) {
.bottoni {
top: 50%; /* adjust to your needs */
position: absolute;
left: 0;
right: 0;
}
}
<div class="bottoni">
<a class="bottone">
Votaci
<div class="rainbow"></div>
</a>
<a class="bottone">
forum
<div class="rainbow"></div>
</a>
<a class="bottone">
regolamento
<div class="rainbow"></div>
</a>
<a class="bottone">
shop
<div class="rainbow"></div>
</a>
</div>
you can use css #media
#media screen and (min-width: 480px // size of the screen) {}
Related
I have a 3D triangle with a base color for every shape, but I want the base (aka the square) to have an animated color, but after adding the animation, the triangles all lay flat all of the sudden. When I remove the animation, the shapes readjust as they should.
For the animation I hue-rotate the linear-gradient color of the square in #keframes animate.
Here is the html code:
<div class="wrapper">
<div class="pyramid">
<div class="square">
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
</div>
</div>
</div>
And CSS:
#-webkit-keyframes animate {
0%, 100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
}
#keyframes animate {
0%, 100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
}
#-webkit-keyframes rotate {
from {
transform: rotateX(120deg) rotateZ(0deg);
}
50% {
transform: rotateX(120deg) rotateZ(180deg);
}
to {
transform: rotateX(120deg) rotateZ(360deg);
}
}
#keyframes rotate {
from {
transform: rotateX(120deg) rotateZ(0deg);
}
50% {
transform: rotateX(120deg) rotateZ(180deg);
}
to {
transform: rotateX(120deg) rotateZ(360deg);
}
}
.wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
top: 500px;
left: 50%;
margin-bottom: 0;
transform-style: preserve-3d;
width: 3.75rem;
height: 3.75rem;
transform-origin: 1.875rem 1.875rem;
transform: rotateX(120deg) rotateZ(45deg);
-webkit-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}
.pyramid {
position: absolute;
perspective: 500px;
transform-style: preserve-3d;
}
.square {
width: 3.75rem;
height: 3.75rem;
transform-style: preserve-3d;
background: linear-gradient(to left, #008aff, #00ffe7);
-webkit-animation: animate 5s linear infinite;
animation: animate 5s linear infinite;
}
.triangle {
position: absolute;
width: 5rem;
height: 5rem;
}
.triangle:nth-child(1) {
width: 3.75rem;
top: -33%;
background: #f1ecfb;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
transform-origin: 50% 100%;
transform: rotateX(-68deg);
}
.triangle:nth-child(2) {
width: 3.75rem;
background: #f1ecfb;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
transform-origin: 50% 0%;
transform: rotateX(68deg);
}
.triangle:nth-child(3) {
height: 3.75rem;
left: -33%;
background: white;
transform-origin: 100% 50%;
-webkit-clip-path: polygon(100% 100%, 0 50%, 100% 0);
clip-path: polygon(100% 100%, 0 50%, 100% 0);
transform: rotateY(68deg);
}
.triangle:nth-child(4) {
height: 3.75rem;
background: white;
transform-origin: 0% 50%;
-webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
clip-path: polygon(0 100%, 100% 50%, 0 0);
transform: rotateY(-68deg);
}
I changed it so that the animation changes the background color which resolves the issue.
#-webkit-keyframes animate {
0%, 100%{
background: #ffadad;
}
12.5%{
background: #ffd6a5;
}
25%{
background: #fdffb6;
}
37.5%{
background: #caffbf;
}
50%{
background: #9bf6ff;
}
62.5%{
background: #a0c4ff;
}
75%{
background: #bdb2ff;
}
87.5%{
background: #ffc6ff;
}
}
#keyframes animate {
0%, 100%{
background: #ffadad;
}
12.5%{
background: #ffd6a5;
}
25%{
background: #fdffb6;
}
37.5%{
background: #caffbf;
}
50%{
background: #9bf6ff;
}
62.5%{
background: #a0c4ff;
}
75%{
background: #bdb2ff;
}
87.5%{
background: #ffc6ff;
}
}
I am new to CSS animations so I made this little project in which there is a box bouncing and it looks pretty real. I want the text inside the box (at the beginning it is just a 0) to increment by one every time the box bounces/the animation is complete. I tried using a counter but it keeps on resetting.
Here is my code:
* {
font-family: sans-serif;
}
#container {
border-bottom: 3px solid #444;
display: flex;
height: 330px;
width: 100%;
}
#oboing {
align-self: flex-end;
animation-duration: 2s;
animation-iteration-count: infinite;
background-color: black;
height: 200px;
margin: 0 auto 0 auto;
transform-origin: bottom;
width: 200px;
}
#counter::before {
color: white;
position: relative;
left: 40%;
top: 40%;
font-size: 50px;
content: counter(bounceCount);
}
#oboing {
animation-name: oboing;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}
#keyframes oboing {
0% {
transform: scale(1, 1) translateY(0);
counter-reset: bounceCount, calc(counter(bounceCount)+1)
}
10% {
transform: scale(1.1, .9) translateY(0)
}
30% {
transform: scale(.9, 1.1) translateY(-100px);
}
50% {
transform: scale(1.05, .95) translateY(0)
}
57% {
transform: scale(1, 1) translateY(-7px);
}
64% {
transform: scale(1, 1) translateY(0)
}
100% {
transform: scale(1, 1) translateY(0);
counter-increment: bounceCount;
}
}
body {
background: linear-gradient(191deg, #3a22bd, #ea2b0b);
background-size: 400% 400%;
height: 100vh;
overflow: hidden;
-webkit-animation: Colors 4s ease infinite;
-moz-animation: Colors 4s ease infinite;
-o-animation: Colors 4s ease infinite;
animation: Colors 4s ease infinite;
}
#-webkit-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-moz-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-o-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
<div id='container'>
<div id='oboing'>
<span id='counter'>0</span>
</div>
</div>
I am open to any suggestions including CSS, HTML, Jquery, JS, etc...
I would also appreciate it if someone could also explain why their code works... Many times I see answers on this website that have only code and no explaining. Please explain!
By it's definition, counter-increment is a non-animatable css property - that's why you're not being successful in using it in your animation. You would have to use a javascript function to count the bounces. As the animation duration is 2 seconds, one approach would be to use a set-interval approach and increment your counter every 2 seconds.
document.getElementById('counter').innerHTML = 0;
function increment() {
var x = document.getElementById('counter').innerHTML;
//if we declare the x value as 0, it will keep resetting,
//so instead, put we retrieve the initial value from the span
//and set the variable to that value
x++;
//increase by 1
document.getElementById('counter').innerHTML = x; //set span value
}
setInterval(increment, 2000); //1000ms in 1 sec
* {
font-family: sans-serif;
}
#container {
border-bottom: 3px solid #444;
display: flex;
height: 330px;
width: 100%;
}
#oboing {
align-self: flex-end;
animation-duration: 2s;
animation-iteration-count: infinite;
background-color: black;
height: 200px;
margin: 0 auto 0 auto;
transform-origin: bottom;
width: 200px;
}
#counter {
color: white;
position: relative;
left: 40%;
top: 40%;
font-size: 50px;
}
#oboing {
animation-name: oboing;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}
#keyframes oboing {
0% {
transform: scale(1, 1) translateY(0);
}
10% {
transform: scale(1.1, .9) translateY(0)
}
30% {
transform: scale(.9, 1.1) translateY(-100px);
}
50% {
transform: scale(1.05, .95) translateY(0)
}
57% {
transform: scale(1, 1) translateY(-7px);
}
64% {
transform: scale(1, 1) translateY(0)
}
100% {
transform: scale(1, 1) translateY(0);
}
}
body {
background: linear-gradient(191deg, #3a22bd, #ea2b0b);
background-size: 400% 400%;
height: 100vh;
overflow: hidden;
-webkit-animation: Colors 4s ease infinite;
-moz-animation: Colors 4s ease infinite;
-o-animation: Colors 4s ease infinite;
animation: Colors 4s ease infinite;
}
#-webkit-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-moz-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-o-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
<div id='container'>
<div id='oboing'>
<span id='counter'>0</span>
</div>
</div>
Hope this clears things up for you! :)
I have a problem, I made a beautiful button with snake effect but I need a last thing, I need to hide overflow to make the snake effect.
there is my button:
I want to hide theses parts, with overflow: hidden; this works with position: absolute; but not with relative.
body {
padding: 30px;
}
.btn-order {
position: relative;;
background-color: #961a22;
color: #ff7675;
padding: 30px 60px;
font-family: Helvetica;
font-size: 30px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
overflow: hidden;
}
.btn-order:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 50%;
background: rgba(255, 255, 255, 0.07);
}
.btn-order span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(to right, #ffffff, #ff3a3a);
animation: animate1 1.25s linear infinite;
}
#keyframes animate1 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.btn-order span:nth-child(2) {
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, #ffffff, #ff3a3a);
animation: animate2 1.25s linear infinite;
animation-delay: 0.625s;
}
#keyframes animate2 {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
.btn-order span:nth-child(3) {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 4px;
background: linear-gradient(to left, #ffffff, #ff3a3a);
animation: animate3 1.25s linear infinite;
}
#keyframes animate3 {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.btn-order span:nth-child(4) {
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to top, #ffffff, #ff3a3a);
animation: animate4 1.25s linear infinite;
animation-delay: 0.625s;
}
#keyframes animate4 {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
<a href="#" class="btn-order">
<span></span>
<span></span>
<span></span>
<span></span>
COMMANDER
</a>
Thanks for helping me :)
Increasing the body width can fix it.
The CSS loader doesn't work sometimes in IE 11. When the page is loaded for the first time, everything is OK. But after the first correct one, the loader is displayed incorrectly, and only the central stick changes it's size. Seems like :before and :after pieces don't work properly. How can I fix it for IE 11? It works fine for Chrome, for example.
.loader {
background: #1C5685;
position: relative;
width: 0.8em;
height: 4em;
margin: 250px auto;
color: #1C5685;
text-indent: -9999em;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before {
width: 0.8em;
height: 4em;
background: #1C5685;
content: '';
position: absolute;
top: 0;
left: -1.5em;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
width: 0.8em;
height: 4em;
background: #1C5685;
content: '';
position: absolute;
top: 0;
left: 1.5em;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#loadingDiv {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 0.7;
z-index: 3;
}
Working Demo:
.loader {
background: #1C5685;
position: relative;
width: 0.8em;
height: 4em;
margin: 250px auto;
color: #1C5685;
text-indent: -9999em;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before {
width: 0.8em;
height: 4em;
background: #1C5685;
content: '';
position: absolute;
top: 0;
left: -1.5em;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
width: 0.8em;
height: 4em;
background: #1C5685;
content: '';
position: absolute;
top: 0;
left: 1.5em;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#loadingDiv {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 0.7;
z-index: 3;
}
<div id="loadingDiv">
<div class="loader">Loading...</div>
</div>
UPD:
It was to pulse like this
But it did it like this (only middle stick pulsed)
So the solution was found by myself - to replace the unproperly working in IE ":before" and ":after" pseudo-elements with REAL elements, to update their animation delays and to put them together (they are not displayed by default and become visible on loadings):
<!-- 3 loadingDiv's with loaders inside: 1 div for each of 3 animated sticks of loader -->
<div style="display:none" id="loadingDiv1">
<div class="loader1" >Loading...</div>
</div>
<div style="display:none" id="loadingDiv2">
<div class="loader2" >Loading...</div>
</div>
<div style="display:none" id="loadingDiv3">
<div class="loader3" >Loading...</div>
</div>
.loader1,
.loader2,
.loader3 {
background: #1C5685;
position: relative;
width: 0.8em;
height: 4em;
margin: 250px auto;
color: #1C5685;
text-indent: -9999em;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
}
.loader1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
/* .loader3 has 0 delay */
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#loadingDiv1,
#loadingDiv2,
#loadingDiv3 {
position: fixed;
top: 0;
width: 100%;
height: 100%;
opacity: 0.7;
z-index: 3;
}
#loadingDiv1 {
left: -1em;
background-color: white;
}
#loadingDiv2 {
left: 0;
}
#loadingDiv3 {
left: 1em;
}
I'm creating a CSS3 loading icon effect instead of using GIF. I have created the loading icon effect but I'm unable to make it circle. It is revolving in square instead of circle. Border-radius not working with border-image property ?
HTML
<div id="progress">
<span class="spinner-icon"></span>
</div>
CSS
#progress {
pointer-events: none;
}
#progress .spinner-icon {
width: 30px;
height: 30px;
display:block;
border: solid 2px transparent;
border-radius:50%;
-webkit-animation: progress-spinner 600ms linear infinite;
animation: progress-spinner 600ms linear infinite;
-moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
}
#progress {
position: absolute;
}
#-webkit-keyframes progress-spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes progress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
http://jsfiddle.net/44athund/3/
This won't work with border-image. The radius is being applied to the object however the border-image with a gradient will not be respected.
Based on what you what, I've created a fiddle here https://jsfiddle.net/a9dpg582/1/ I think this is what you're after.
#progress {
pointer-events: none;
position: relative;
}
#progress .spinner-icon::after {
content: '';
border-radius: 50%;
background-color: #FFF;
width: 26px;
height: 26px;
position: absolute;
left: 2px;
top: 2px;
}
#progress .spinner-icon {
width: 30px;
height: 30px;
display: block;
background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
border-radius: 50%;
-webkit-animation: progress-spinner 600ms linear infinite;
animation: progress-spinner 600ms linear infinite;
}
#progress {
position: absolute;
border-radius: 50%;
}
#-webkit-keyframes progress-spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes progress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}