Skip to content

Commit 93cb207

Browse files
AdithiAdithi
Adithi
authored and
Adithi
committed
new loaders
1 parent 1b4e3ed commit 93cb207

File tree

4 files changed

+261
-2
lines changed

4 files changed

+261
-2
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,5 +82,6 @@ If you had fun while contributing to this project, then don't forget to give thi
8282
- [Abhay Gupta](https://github.com/abhaygupta08)
8383
- [Navkiran Singh](https://github.com/inavkiran)
8484
- [Anuj Kumar Maurya](https://github.com/Anujkumar2017)
85+
- [Adithi Desai](https://github.com/AdithiDesai)
8586

8687
### Thanks for your contribution

‎codes.js‎

Lines changed: 134 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2927,5 +2927,138 @@ const codes = [
29272927
50% {background-position: right }
29282928
}
29292929
`
2930-
}
2930+
},
2931+
2932+
{
2933+
id:45,
2934+
code:`
2935+
##HTML
2936+
<div class = "loader-45"> </div>
2937+
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
2938+
<lottie-player src="https://assets8.lottiefiles.com/packages/lf20_wukqhhrq.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
2939+
2940+
`
2941+
},
2942+
2943+
{
2944+
id: 46,
2945+
code:`
2946+
##HTML
2947+
2948+
<div class = "loader-46"> </div>
2949+
2950+
<div class="hourglass2"></div>
2951+
2952+
##CSS
2953+
2954+
:root {
2955+
--bg: #e3e4e8;
2956+
--fg: #2e3138;
2957+
--primary: #25dff4;
2958+
2959+
}
2960+
2961+
.hourglass2, .hourglass2:before, .hourglass2:after {
2962+
animation-duration: 4s;
2963+
animation-iteration-count: infinite;
2964+
}
2965+
.hourglass2 {
2966+
--polygonH: polygon(0% 0%,100% 0%,100% 5.55%,95% 5.55%,95% 28%,60% 46%,60% 54%,95% 72%,95% 94.45%,100% 94.45%,100% 100%,0% 100%,0% 94.45%,5% 94.45%,5% 72%,40% 54%,40% 46%,5% 28%,5% 5.55%,0% 5.55%);
2967+
animation-name: flip;
2968+
animation-timing-function: ease-in-out;
2969+
background-image: linear-gradient(var(--primary) 0.5em,#737a8c55 0.5em 8.5em,var(--primary) 8.5em);
2970+
clip-path: var(--polygonH);
2971+
-webkit-clip-path: var(--polygonH);
2972+
overflow: hidden;
2973+
position: relative;
2974+
width: 5em;
2975+
height: 9em;
2976+
z-index: 0;
2977+
}
2978+
.hourglass2:before, .hourglass2:after {
2979+
animation-timing-function: linear;
2980+
content: "";
2981+
display: block;
2982+
position: absolute;
2983+
}
2984+
.hourglass2:before {
2985+
--polygonB1: polygon(0% 0%,100% 0%,100% 24%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,0% 24%);
2986+
--polygonB2: polygon(0% 4%,100% 4%,100% 24%,55% 45%,55% 100%,55% 100%,55% 100%,45% 100%,45% 100%,45% 100%,45% 45%,0% 24%);
2987+
--polygonB3: polygon(0% 24%,100% 24%,100% 24%,55% 45%,55% 80%,100% 100%,100% 100%,0% 100%,0% 100%,45% 80%,45% 45%,0% 24%);
2988+
--polygonB4: polygon(45% 45%,55% 45%,55% 45%,55% 45%,55% 58%,100% 76%,100% 100%,0% 100%,0% 76%,45% 58%,45% 45%,45% 45%);
2989+
--polygonB5: polygon(50% 53%,50% 53%,50% 53%,50% 53%,50% 53%,100% 76%,100% 100%,0% 100%,0% 76%,50% 53%,50% 53%,50% 53%);
2990+
animation-name: fill;
2991+
background-color: var(--fg);
2992+
background-size: 100% 3.6em;
2993+
clip-path: var(--polygonB1);
2994+
-webkit-clip-path: var(--polygonB1);
2995+
top: 0.5em;
2996+
left: 0.5em;
2997+
width: 4em;
2998+
height: 8em;
2999+
z-index: 1;
3000+
}
3001+
.hourglass2:after {
3002+
animation-name: glare;
3003+
background:
3004+
linear-gradient(90deg,#0000 0.5em,#0003 0.5em 1.5em,#0000 1.5em 3.5em,#fff3 3.5em 4.5em,#fff0 4.5em 6.5em,#0003 6.5em 7.5em,#0000 7.5em) 0 0 / 100% 0.5em,
3005+
linear-gradient(90deg,#0000 0.75em,#0003 0.75em 1.25em,#0000 1.25em 3.75em,#fff3 3.75em 4.25em,#fff0 4.25em 6.75em,#0003 6.75em 7.25em,#0000 7.25em) 0 0.5em / 100% 8em,
3006+
linear-gradient(90deg,#0000 0.5em,#0003 0.5em 1.5em,#0000 1.5em 3.5em,#fff3 3.5em 4.5em,#fff0 4.5em 6.5em,#0003 6.5em 7.5em,#0000 7.5em) 0 100% / 100% 0.5em;
3007+
background-repeat: repeat-x;
3008+
/* top: 0;
3009+
left: -3em;
3010+
width: 200%;
3011+
height: 100%; */
3012+
z-index: 2;
3013+
}
3014+
/* Animations */
3015+
@keyframes fill {
3016+
from {
3017+
clip-path: var(--polygonB1);
3018+
-webkit-clip-path: var(--polygonB1);
3019+
}
3020+
10% {
3021+
clip-path: var(--polygonB2);
3022+
-webkit-clip-path: var(--polygonB2);
3023+
}
3024+
45% {
3025+
clip-path: var(--polygonB3);
3026+
-webkit-clip-path: var(--polygonB3);
3027+
}
3028+
80% {
3029+
clip-path: var(--polygonB4);
3030+
-webkit-clip-path: var(--polygonB4);
3031+
}
3032+
85%, to {
3033+
clip-path: var(--polygonB5);
3034+
-webkit-clip-path: var(--polygonB5);
3035+
}
3036+
}
3037+
@keyframes glare {
3038+
from, 90% {
3039+
transform: translateX(0);
3040+
}
3041+
to {
3042+
transform: translateX(3em);
3043+
}
3044+
}
3045+
@keyframes flip {
3046+
from, 90% {
3047+
transform: rotate(0);
3048+
}
3049+
to {
3050+
transform: rotate(180deg);
3051+
}
3052+
}
3053+
/* Dark mode */
3054+
@media (prefers-color-scheme: dark) {
3055+
:root {
3056+
--bg: #17181c;
3057+
--fg: #c7cad1;
3058+
}
3059+
}
3060+
3061+
`
3062+
},
3063+
29313064
];

‎index.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2828,6 +2828,113 @@ body {
28282828
}
28292829

28302830

2831+
/* .............Loader-46th............... */
2832+
:root {
2833+
--bg: #e3e4e8;
2834+
--fg: #2e3138;
2835+
--primary: #25dff4;
2836+
2837+
}
2838+
2839+
.hourglass2, .hourglass2:before, .hourglass2:after {
2840+
animation-duration: 4s;
2841+
animation-iteration-count: infinite;
2842+
}
2843+
.hourglass2 {
2844+
--polygonH: polygon(0% 0%,100% 0%,100% 5.55%,95% 5.55%,95% 28%,60% 46%,60% 54%,95% 72%,95% 94.45%,100% 94.45%,100% 100%,0% 100%,0% 94.45%,5% 94.45%,5% 72%,40% 54%,40% 46%,5% 28%,5% 5.55%,0% 5.55%);
2845+
animation-name: flip;
2846+
animation-timing-function: ease-in-out;
2847+
background-image: linear-gradient(var(--primary) 0.5em,#737a8c55 0.5em 8.5em,var(--primary) 8.5em);
2848+
clip-path: var(--polygonH);
2849+
-webkit-clip-path: var(--polygonH);
2850+
overflow: hidden;
2851+
position: relative;
2852+
width: 5em;
2853+
height: 9em;
2854+
z-index: 0;
2855+
}
2856+
.hourglass2:before, .hourglass2:after {
2857+
animation-timing-function: linear;
2858+
content: "";
2859+
display: block;
2860+
position: absolute;
2861+
}
2862+
.hourglass2:before {
2863+
--polygonB1: polygon(0% 0%,100% 0%,100% 24%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,0% 24%);
2864+
--polygonB2: polygon(0% 4%,100% 4%,100% 24%,55% 45%,55% 100%,55% 100%,55% 100%,45% 100%,45% 100%,45% 100%,45% 45%,0% 24%);
2865+
--polygonB3: polygon(0% 24%,100% 24%,100% 24%,55% 45%,55% 80%,100% 100%,100% 100%,0% 100%,0% 100%,45% 80%,45% 45%,0% 24%);
2866+
--polygonB4: polygon(45% 45%,55% 45%,55% 45%,55% 45%,55% 58%,100% 76%,100% 100%,0% 100%,0% 76%,45% 58%,45% 45%,45% 45%);
2867+
--polygonB5: polygon(50% 53%,50% 53%,50% 53%,50% 53%,50% 53%,100% 76%,100% 100%,0% 100%,0% 76%,50% 53%,50% 53%,50% 53%);
2868+
animation-name: fill;
2869+
background-color: var(--fg);
2870+
background-size: 100% 3.6em;
2871+
clip-path: var(--polygonB1);
2872+
-webkit-clip-path: var(--polygonB1);
2873+
top: 0.5em;
2874+
left: 0.5em;
2875+
width: 4em;
2876+
height: 8em;
2877+
z-index: 1;
2878+
}
2879+
.hourglass2:after {
2880+
animation-name: glare;
2881+
background:
2882+
linear-gradient(90deg,#0000 0.5em,#0003 0.5em 1.5em,#0000 1.5em 3.5em,#fff3 3.5em 4.5em,#fff0 4.5em 6.5em,#0003 6.5em 7.5em,#0000 7.5em) 0 0 / 100% 0.5em,
2883+
linear-gradient(90deg,#0000 0.75em,#0003 0.75em 1.25em,#0000 1.25em 3.75em,#fff3 3.75em 4.25em,#fff0 4.25em 6.75em,#0003 6.75em 7.25em,#0000 7.25em) 0 0.5em / 100% 8em,
2884+
linear-gradient(90deg,#0000 0.5em,#0003 0.5em 1.5em,#0000 1.5em 3.5em,#fff3 3.5em 4.5em,#fff0 4.5em 6.5em,#0003 6.5em 7.5em,#0000 7.5em) 0 100% / 100% 0.5em;
2885+
background-repeat: repeat-x;
2886+
/* top: 0;
2887+
left: -3em;
2888+
width: 200%;
2889+
height: 100%; */
2890+
z-index: 2;
2891+
}
2892+
/* Animations */
2893+
@keyframes fill {
2894+
from {
2895+
clip-path: var(--polygonB1);
2896+
-webkit-clip-path: var(--polygonB1);
2897+
}
2898+
10% {
2899+
clip-path: var(--polygonB2);
2900+
-webkit-clip-path: var(--polygonB2);
2901+
}
2902+
45% {
2903+
clip-path: var(--polygonB3);
2904+
-webkit-clip-path: var(--polygonB3);
2905+
}
2906+
80% {
2907+
clip-path: var(--polygonB4);
2908+
-webkit-clip-path: var(--polygonB4);
2909+
}
2910+
85%, to {
2911+
clip-path: var(--polygonB5);
2912+
-webkit-clip-path: var(--polygonB5);
2913+
}
2914+
}
2915+
@keyframes glare {
2916+
from, 90% {
2917+
transform: translateX(0);
2918+
}
2919+
to {
2920+
transform: translateX(3em);
2921+
}
2922+
}
2923+
@keyframes flip {
2924+
from, 90% {
2925+
transform: rotate(0);
2926+
}
2927+
to {
2928+
transform: rotate(180deg);
2929+
}
2930+
}
2931+
/* Dark mode */
2932+
@media (prefers-color-scheme: dark) {
2933+
:root {
2934+
--bg: #17181c;
2935+
--fg: #c7cad1;
2936+
}
2937+
}
28312938

28322939
/* .............Loader-nth............... */
28332940
/* add the css for the Loader-nth... */

‎index.html‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -552,6 +552,24 @@ <h1>Copy Code</h1>
552552
<a href="#demo-modal" id="44" class="show-code-btn">Show Code</a>
553553
</div>
554554

555+
<!-- Loader-45-->
556+
<div class="loader-box">
557+
<div class = "loader-45"> </div>
558+
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
559+
<lottie-player src="https://assets8.lottiefiles.com/packages/lf20_wukqhhrq.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
560+
<a href="#demo-modal" id="45" class="show-code-btn">Show Code</a>
561+
562+
</div>
563+
564+
<!-- Loader-46-->
565+
<div class="loader-box">
566+
<div class = "loader-46"> </div>
567+
568+
<div class="hourglass2"></div>
569+
<a href="#demo-modal" id="46" class="show-code-btn">Show Code</a>
570+
571+
</div>
572+
555573
<!-- Loader-n -->
556574
<!-- <div class="loader-box">
557575
<div class="loader-n">
@@ -566,7 +584,7 @@ <h1>Copy Code</h1>
566584
<!--
567585
You can add the loader HTML code here and add the css code inside the
568586
index.css file
569-
-->
587+
-->
570588
<div class="loader-box">More to add...</div>
571589
</div>
572590
<footer>

0 commit comments

Comments
 (0)