Skip to content

Commit 2cf1a84

Browse files
Vineeth T RVineeth T R
Vineeth T R
authored and
Vineeth T R
committed
workspn 21
1 parent 722923c commit 2cf1a84

File tree

2 files changed

+540
-5
lines changed

2 files changed

+540
-5
lines changed

‎css/workshop.css

Lines changed: 275 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -765,8 +765,281 @@ body section:nth-child(2n + 1) {
765765
}
766766
}
767767
768-
.md-0 .loader {
768+
.md-16 .loader {
769769
position: relative;
770770
width: 100px;
771-
height: 20px;
771+
height: 16px;
772+
}
773+
774+
.md-16 .loader:before, .md-16 .loader:after {
775+
content: "";
776+
position: absolute;
777+
width: 16px;
778+
height: 16px;
779+
border-radius: 50%;
780+
background: #fff;
781+
box-shadow: 32px 0 #fff;
782+
left: 0;
783+
top: 0;
784+
animation: ballMoveX 1s linear infinite;
785+
}
786+
787+
.md-16 .loader:after {
788+
box-shadow: none;
789+
transform-origin: 40px 0;
790+
transform: rotate(-153deg);
791+
animation: rotateLoader 1s linear infinite;
792+
}
793+
794+
@keyframes rotateLoader {
795+
0%, 10% {
796+
transform: rotate(-153deg);
797+
}
798+
90%, 100% {
799+
transform: rotate(0deg);
800+
}
801+
}
802+
803+
@keyframes ballMoveX {
804+
0%, 10% {
805+
transform: translateX(0);
806+
}
807+
90%, 100% {
808+
transform: translateX(32px);
809+
}
810+
}
811+
812+
.md-17 .loader {
813+
position: relative;
814+
width: 64px;
815+
height: 64px;
816+
background-color: rgba(0, 0, 0, 0.5);
817+
transform: rotate(45deg);
818+
overflow: hidden;
819+
}
820+
821+
.md-17 .loader:after {
822+
content: '';
823+
position: absolute;
824+
inset: 8px;
825+
margin: auto;
826+
background: #222b32;
827+
}
828+
829+
.md-17 .loader:before {
830+
content: '';
831+
position: absolute;
832+
inset: -15px;
833+
margin: auto;
834+
background: #de3500;
835+
animation: diamondLoader 2s linear infinite;
836+
}
837+
838+
@keyframes diamondLoader {
839+
0%, 10% {
840+
transform: translate(-64px, -64px) rotate(-45deg);
841+
}
842+
90%, 100% {
843+
transform: translate(0px, 0px) rotate(-45deg);
844+
}
845+
}
846+
847+
.md-18 .loader {
848+
position: relative;
849+
width: 64px;
850+
height: 64px;
851+
background: #fff;
852+
border-radius: 50%;
853+
overflow: hidden;
854+
}
855+
856+
.md-18 .loader:after {
857+
content: '';
858+
position: absolute;
859+
inset: 8px;
860+
margin: auto;
861+
background: #222b32;
862+
border-radius: 50%;
863+
}
864+
865+
.md-18 .loader:before {
866+
content: '';
867+
position: absolute;
868+
inset: 0px;
869+
margin: auto;
870+
background: #de3500;
871+
animation: crlMugLoader 2s linear infinite alternate;
872+
}
873+
874+
@keyframes crlMugLoader {
875+
0%, 10% {
876+
transform: translateY(64px);
877+
}
878+
90%, 100% {
879+
transform: translateY(0px);
880+
}
881+
}
882+
883+
.md-19 .loader {
884+
position: relative;
885+
width: 100px;
886+
height: 100px;
887+
}
888+
889+
.md-19 .loader:before {
890+
content: '';
891+
position: absolute;
892+
width: 48px;
893+
height: 48px;
894+
border-radius: 50%;
895+
top: 50%;
896+
left: 0;
897+
transform: translate(-5px, -50%);
898+
background: linear-gradient(to right, #fff 50%, #de3500 50%) no-repeat;
899+
background-size: 200% auto;
900+
background-position: 100% 0;
901+
animation: colorBallMoveX 1.5s linear infinite alternate;
902+
}
903+
904+
.md-19 .loader:after {
905+
content: '';
906+
position: absolute;
907+
left: 50%;
908+
top: 0;
909+
transform: translateX(-50%);
910+
width: 2px;
911+
height: 100%;
912+
background: #de3500;
913+
}
914+
915+
@keyframes colorBallMoveX {
916+
0% {
917+
background-position: 0% 0;
918+
transform: translate(-15px, -50%);
919+
}
920+
15%, 25% {
921+
background-position: 0% 0;
922+
transform: translate(0px, -50%);
923+
}
924+
75%, 85% {
925+
background-position: 100% 0;
926+
transform: translate(50px, -50%);
927+
}
928+
100% {
929+
background-position: 100% 0;
930+
transform: translate(65px, -50%);
931+
}
932+
}
933+
934+
.md-20 .loader {
935+
position: relative;
936+
width: 48px;
937+
height: 48px;
938+
background: #fff;
939+
border-radius: 50%;
940+
animation: ellipseAnimation 2s linear infinite;
941+
}
942+
943+
@keyframes ellipseAnimation {
944+
0% {
945+
border-radius: 50%;
946+
}
947+
12.5% {
948+
border-radius: 0 50% 50% 50%;
949+
transform: rotate(45deg);
950+
}
951+
25% {
952+
border-radius: 0 0 50% 50%;
953+
transform: rotate(90deg);
954+
}
955+
37.5% {
956+
border-radius: 0 0 0 50%;
957+
transform: rotate(135deg);
958+
}
959+
50% {
960+
border-radius: 0;
961+
transform: rotate(180deg);
962+
}
963+
62.5% {
964+
border-radius: 50% 0 0 0;
965+
transform: rotate(225deg);
966+
}
967+
75% {
968+
border-radius: 50% 50% 0 0;
969+
transform: rotate(270deg);
970+
}
971+
87.5% {
972+
border-radius: 50% 50% 50% 0;
973+
transform: rotate(315deg);
974+
}
975+
100% {
976+
border-radius: 50%;
977+
transform: rotate(360deg);
978+
}
979+
}
980+
981+
.md-21 .loader {
982+
position: relative;
983+
font-size: 16px;
984+
width: 5.5em;
985+
height: 5.5em;
986+
}
987+
988+
.md-21 .loader:before {
989+
content: '';
990+
position: absolute;
991+
transform: translate(-50%, -50%) rotate(45deg);
992+
height: 100%;
993+
width: 4px;
994+
background: #fff;
995+
left: 50%;
996+
top: 50%;
997+
}
998+
999+
.md-21 .loader:after {
1000+
content: '';
1001+
position: absolute;
1002+
left: 0.2em;
1003+
bottom: 0.18em;
1004+
width: 1em;
1005+
height: 1em;
1006+
background-color: #de3500;
1007+
border-radius: 15%;
1008+
animation: rollingRock 2.5s cubic-bezier(0.79, 0, 0.47, 0.97) infinite;
1009+
}
1010+
1011+
@keyframes rollingRock {
1012+
0% {
1013+
transform: translate(0, -1em) rotate(-45deg);
1014+
}
1015+
5% {
1016+
transform: translate(0, -1em) rotate(-50deg);
1017+
}
1018+
20% {
1019+
transform: translate(1em, -2em) rotate(47deg);
1020+
}
1021+
25% {
1022+
transform: translate(1em, -2em) rotate(45deg);
1023+
}
1024+
30% {
1025+
transform: translate(1em, -2em) rotate(40deg);
1026+
}
1027+
45% {
1028+
transform: translate(2em, -3em) rotate(137deg);
1029+
}
1030+
50% {
1031+
transform: translate(2em, -3em) rotate(135deg);
1032+
}
1033+
55% {
1034+
transform: translate(2em, -3em) rotate(130deg);
1035+
}
1036+
70% {
1037+
transform: translate(3em, -4em) rotate(217deg);
1038+
}
1039+
75% {
1040+
transform: translate(3em, -4em) rotate(220deg);
1041+
}
1042+
100% {
1043+
transform: translate(0, -1em) rotate(-225deg);
1044+
}
7721045
}

0 commit comments

Comments
 (0)