laravelEcomm/public/Dashboard/scss/common/light/components/loaders/_moving-square-loader.scss

36 lines
849 B
SCSS
Raw Normal View History

2024-07-12 07:06:02 +00:00
/* Moving square loader */
.moving-square-loader {
width: 100px;
height: 100px;
border-radius: 100%;
position: relative;
margin: 0 auto;
}
.moving-square-loader:before{
content: "";
position: absolute;
width: 10px;
height: 10px;
top: calc(50% - 10px);
left: 0px;
background-color: rgba(theme-color(danger), .7);
animation: rotatemove 1s infinite;
}
@keyframes rotatemove{
0%{
-webkit-transform: scale(1) translateX(0px);
-ms-transform: scale(1) translateX(0px);
-o-transform: scale(1) translateX(0px);
transform: scale(1) translateX(0px);
}
100%{
-webkit-transform: scale(2) translateX(45px);
-ms-transform: scale(2) translateX(45px);
-o-transform: scale(2) translateX(45px);
transform: scale(2) translateX(45px);
}
}