feat: Add a breadcrumb
This commit is contained in:
kbe
531
assets/css/scss/components/_preloader.scss
Normal file
531
assets/css/scss/components/_preloader.scss
Normal file
@@ -0,0 +1,531 @@
|
||||
//
|
||||
// Preloader Styles //
|
||||
//
|
||||
body {
|
||||
&:after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 998;
|
||||
background: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&.loaded {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
background: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
div {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include transform(translate(-50%,-50%));
|
||||
}
|
||||
}
|
||||
.loaded {
|
||||
.preloader {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
@include transition(ease-out 0.3s);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Preloader 1 //
|
||||
//
|
||||
.preloader-1 {
|
||||
div {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
.loader-circular {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform-origin: center center;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: auto;
|
||||
animation: loader-one-rotate 2s linear infinite;
|
||||
}
|
||||
.loader-path {
|
||||
fill: none;
|
||||
stroke: get-color("dark");
|
||||
stroke-width: 2.5;
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-linecap: round;
|
||||
stroke-miterlimit: 10;
|
||||
animation: loader-one-dash 1.5s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Preloader 1 - Color Options //
|
||||
//
|
||||
.preloader-dark {
|
||||
.preloader-1 {
|
||||
background: black;
|
||||
div {
|
||||
.loader-path {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-blue {
|
||||
.preloader-1 {
|
||||
div {
|
||||
.loader-path {
|
||||
stroke: get-color("blue");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-purple {
|
||||
.preloader-1 {
|
||||
div {
|
||||
.loader-path {
|
||||
stroke: get-color("purple");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-pink-edge {
|
||||
.preloader-1 {
|
||||
div {
|
||||
.loader-path {
|
||||
stroke: get-color("pink-edge");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-golden-yellow {
|
||||
.preloader-1 {
|
||||
div {
|
||||
.loader-path {
|
||||
stroke: get-color("golden-yellow");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-very-peri {
|
||||
.preloader-1 {
|
||||
div {
|
||||
.loader-path {
|
||||
stroke: get-color("very-peri");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-turquoise {
|
||||
.preloader-1 {
|
||||
div {
|
||||
.loader-path {
|
||||
stroke: get-color("turquoise");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-spring-red {
|
||||
.preloader-1 {
|
||||
div {
|
||||
.loader-path {
|
||||
stroke: get-color("spring-red");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-tan {
|
||||
.preloader-1 {
|
||||
div {
|
||||
.loader-path {
|
||||
stroke: get-color("tan");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-aqua {
|
||||
.preloader-1 {
|
||||
div {
|
||||
.loader-path {
|
||||
stroke: get-color("aqua");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loader-one-rotate {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes loader-one-dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Preloader 2 //
|
||||
//
|
||||
.preloader-2 {
|
||||
div {
|
||||
span {
|
||||
display: inline-block;
|
||||
opacity: 0.2;
|
||||
background: black;
|
||||
background: linear-gradient(to right, black 10%, transparent 40%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
@include animation(loader-two 0.6s infinite linear);
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
&:before {
|
||||
background: black;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border-radius: 100% 0 0 0;
|
||||
}
|
||||
&:after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: white;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes loader-two {
|
||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-webkit-keyframes loader-two {
|
||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
//
|
||||
// Preloader 2 - Color Options //
|
||||
//
|
||||
.preloader-dark {
|
||||
.preloader-2 {
|
||||
background: black;
|
||||
div {
|
||||
span {
|
||||
background: white;
|
||||
background: linear-gradient(to right, white 10%, transparent 40%);
|
||||
&:before {
|
||||
background: white;
|
||||
}
|
||||
&:after {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-blue {
|
||||
.preloader-2 {
|
||||
div {
|
||||
span {
|
||||
background: get-color("blue");
|
||||
background: linear-gradient(to right, get-color("blue") 10%, transparent 40%);
|
||||
&:before {
|
||||
background: get-color("blue");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-purple {
|
||||
.preloader-2 {
|
||||
div {
|
||||
span {
|
||||
background: get-color("purple");
|
||||
background: linear-gradient(to right, get-color("purple") 10%, transparent 40%);
|
||||
&:before {
|
||||
background: get-color("purple");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-pink-edge {
|
||||
.preloader-2 {
|
||||
div {
|
||||
span {
|
||||
background: get-color("pink-edge");
|
||||
background: linear-gradient(to right, get-color("pink-edge") 10%, transparent 40%);
|
||||
&:before {
|
||||
background: get-color("pink-edge");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-golden-yellow {
|
||||
.preloader-2 {
|
||||
div {
|
||||
span {
|
||||
background: get-color("golden-yellow");
|
||||
background: linear-gradient(to right, get-color("golden-yellow") 10%, transparent 40%);
|
||||
&:before {
|
||||
background: get-color("golden-yellow");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-very-peri {
|
||||
.preloader-2 {
|
||||
div {
|
||||
span {
|
||||
background: get-color("very-peri");
|
||||
background: linear-gradient(to right, get-color("very-peri") 10%, transparent 40%);
|
||||
&:before {
|
||||
background: get-color("very-peri");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-turquoise {
|
||||
.preloader-2 {
|
||||
div {
|
||||
span {
|
||||
background: get-color("turquoise");
|
||||
background: linear-gradient(to right, get-color("turquoise") 10%, transparent 40%);
|
||||
&:before {
|
||||
background: get-color("turquoise");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-spring-red {
|
||||
.preloader-2 {
|
||||
div {
|
||||
span {
|
||||
background: get-color("spring-red");
|
||||
background: linear-gradient(to right, get-color("spring-red") 10%, transparent 40%);
|
||||
&:before {
|
||||
background: get-color("spring-red");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-tan {
|
||||
.preloader-2 {
|
||||
div {
|
||||
span {
|
||||
background: get-color("tan");
|
||||
background: linear-gradient(to right, get-color("tan") 10%, transparent 40%);
|
||||
&:before {
|
||||
background: get-color("tan");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-aqua {
|
||||
.preloader-2 {
|
||||
div {
|
||||
span {
|
||||
background: get-color("aqua");
|
||||
background: linear-gradient(to right, get-color("aqua") 10%, transparent 40%);
|
||||
&:before {
|
||||
background: get-color("aqua");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Preloader 3 //
|
||||
//
|
||||
.preloader-3 {
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
span {
|
||||
position: relative;
|
||||
display: block;
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: get-color("dark", 0.1);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:before { @include animation(loader-three-bounceIn 1.2s infinite ease-in-out); }
|
||||
&:after { @include animation(loader-three-bounceOut 1.2s infinite ease-in-out); }
|
||||
}
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes loader-three-bounceIn {
|
||||
0%, 100% { -webkit-transform: scale(0); }
|
||||
50% { -webkit-transform: scale(1.0); }
|
||||
}
|
||||
@keyframes loader-three-bounceIn {
|
||||
0%, 100% { -webkit-transform: scale(0); transform: scale(0); }
|
||||
50% { -webkit-transform: scale(1.0); transform: scale(1.0); }
|
||||
}
|
||||
@-webkit-keyframes loader-three-bounceOut {
|
||||
0%, 100% { -webkit-transform: scale(1.0); }
|
||||
50% { -webkit-transform: scale(0); }
|
||||
}
|
||||
@keyframes loader-three-bounceOut {
|
||||
0%, 100% { -webkit-transform: scale(1.0); transform: scale(1.0); }
|
||||
50% { -webkit-transform: scale(0); transform: scale(0); }
|
||||
}
|
||||
//
|
||||
// Preloader 3 - Color Options //
|
||||
//
|
||||
.preloader-dark {
|
||||
.preloader-3 {
|
||||
background: black;
|
||||
div {
|
||||
span {
|
||||
&:before, &:after {
|
||||
background: get-color("white", 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-blue {
|
||||
.preloader-3 {
|
||||
div {
|
||||
span {
|
||||
&:before, &:after {
|
||||
background: get-color("blue", 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-purple {
|
||||
.preloader-3 {
|
||||
div {
|
||||
span {
|
||||
&:before, &:after {
|
||||
background: get-color("purple", 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-pink-edge {
|
||||
.preloader-3 {
|
||||
div {
|
||||
span {
|
||||
&:before, &:after {
|
||||
background: get-color("pink-edge", 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-golden-yellow {
|
||||
.preloader-3 {
|
||||
div {
|
||||
span {
|
||||
&:before, &:after {
|
||||
background: get-color("golden-yellow", 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-very-peri {
|
||||
.preloader-3 {
|
||||
div {
|
||||
span {
|
||||
&:before, &:after {
|
||||
background: get-color("very-peri", 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-turquoise {
|
||||
.preloader-3 {
|
||||
div {
|
||||
span {
|
||||
&:before, &:after {
|
||||
background: get-color("turquoise", 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-spring-red {
|
||||
.preloader-3 {
|
||||
div {
|
||||
span {
|
||||
&:before, &:after {
|
||||
background: get-color("spring-red", 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-tan {
|
||||
.preloader-3 {
|
||||
div {
|
||||
span {
|
||||
&:before, &:after {
|
||||
background: get-color("tan", 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader-aqua {
|
||||
.preloader-3 {
|
||||
div {
|
||||
span {
|
||||
&:before, &:after {
|
||||
background: get-color("aqua", 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user