diff --git a/Loaders/index.html b/Loaders/index.html
new file mode 100644
index 0000000..ca495fd
--- /dev/null
+++ b/Loaders/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+ Loaders
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Loaders/style.css b/Loaders/style.css
new file mode 100644
index 0000000..66075b8
--- /dev/null
+++ b/Loaders/style.css
@@ -0,0 +1,361 @@
+*,
+:before,
+:after {
+ margin: 0;
+ box-sizing: border-box;
+}
+body {
+ background: #263040;
+ display: grid;
+ place-items: center;
+ width: 100%;
+ height: 100vh;
+}
+
+
+.big-circle {
+ width: 8rem;
+ height: 8rem;
+ border: 5px solid #ffff;
+ border-radius: 50%;
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ position:relative;
+ border-color: #fff transparent #fff #fff;
+ animation: bigcircle 1.2s linear infinite;
+}
+.small-circle {
+ position:relative;
+ width: 5rem;
+ height: 5rem;
+ border: 5px solid #ffff;
+ border-radius: 50%;
+ border-color: #fff #fff transparent #fff;
+}
+
+@keyframes bigcircle {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+
+
+div.wrapper {
+ width: 100%;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+h1.brand {
+ font-size: 40px;
+}
+h1.brand span:nth-child(1) {
+ background-color: transparent;
+ color: #0074b4;
+}
+h1.brand span:nth-child(2) {
+ background-color: #0074b4;
+ color: #f3f2ef;
+ padding: 0px 6px;
+ margin-left: -6px;
+ border-radius: 2px;
+}
+div.loading-bar {
+ width: 100px;
+ height: 2px;
+ background-color: #d6cec2;
+ border-radius: 10px;
+ margin-top: 25px;
+ overflow: hidden;
+ position: relative;
+}
+div.loading-bar::after {
+ content: '';
+ width: 50px;
+ height: 2px;
+ position: absolute;
+ background-color: #0074b4;
+ transform: translateX(-20px);
+ animation: loop 2s ease infinite;
+}
+@keyframes loop {
+ 0%,100% {
+ transform: translateX(-28px);
+ }
+ 50% {
+ transform: translateX(78px)
+ }
+}
+
+.loader {
+ margin-top: 50px;
+ width: 300px;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ }
+ .loader span {
+ width: 10px;
+ height: 10px;
+ background-color: #ffffff;
+ border-radius: 30px;
+ -webkit-border-radius: 30px;
+ -moz-border-radius: 30px;
+ -ms-border-radius: 30px;
+ -o-border-radius: 30px;
+ animation: animate 2s linear infinite;
+ -webkit-animation: animate 2s linear infinite;
+ transition: 0.5s;
+ -webkit-transition: 0.5s;
+ -moz-transition: 0.5s;
+ -ms-transition: 0.5s;
+ -o-transition: 0.5s;
+ opacity: 1;
+ }
+ .loader span:nth-child(1) {
+ animation-delay: 0.2s;
+ }
+ .loader span:nth-child(2) {
+ animation-delay: 0.4s;
+ }
+ .loader span:nth-child(3) {
+ animation-delay: 0.6s;
+ }
+ .loader span:nth-child(4) {
+ animation-delay: 0.8s;
+ }
+ .loader span:nth-child(5) {
+ animation-delay: 1s;
+ }
+ @keyframes animate {
+ 0% {
+ transform: translateY(0px);
+ -webkit-transform: translateY(0px);
+ -moz-transform: translateY(0px);
+ -ms-transform: translateY(0px);
+ -o-transform: translateY(0px);
+ }
+ 25% {
+ transform: translateY(-50px);
+ -webkit-transform: translateY(-50px);
+ -moz-transform: translateY(-50px);
+ -ms-transform: translateY(-50px);
+ -o-transform: translateY(-50px);
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ transform: translate(0px);
+ -webkit-transform: translate(0px);
+ -moz-transform: translate(0px);
+ -ms-transform: translate(0px);
+ -o-transform: translate(0px);
+ }
+ 100% {
+ opacity: 0;
+ }
+ }
+ .loader_2 {
+ width: 200px;
+ height: 200px;
+ border-radius: 200px;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ -webkit-border-radius: 200px;
+ -moz-border-radius: 200px;
+ -ms-border-radius: 200px;
+ -o-border-radius: 200px;
+ position: relative;
+ }
+ .loader_2 span {
+ background-color: rgb(255, 255, 255);
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ border-radius: 30px;
+ -webkit-border-radius: 30px;
+ -moz-border-radius: 30px;
+ -ms-border-radius: 30px;
+ -o-border-radius: 30px;
+ animation: display 1s infinite;
+ -webkit-animation: display 3s infinite;
+ transform: scale(0);
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ -ms-transform: scale(0);
+ -o-transform: scale(0);
+ }
+ .loader_2 span:nth-child(1) {
+ top: 0px;
+ right: 44%;
+ animation-delay: 0.2s;
+ }
+ .loader_2 span:nth-child(2) {
+ top: 3%;
+ right: 27%;
+ animation-delay: 0.4s;
+ }
+ .loader_2 span:nth-child(3) {
+ top: 24px;
+ right: 25px;
+ animation-delay: 0.6s;
+ }
+ .loader_2 span:nth-child(4) {
+ top: 53px;
+ right: 7px;
+ animation-delay: 0.8s;
+ }
+ .loader_2 span:nth-child(5) {
+ top: 88px;
+ right: 0;
+ animation-delay: 1s;
+ }
+ .loader_2 span:nth-child(6) {
+ top: 122px;
+ right: 10px;
+ animation-delay: 1.2s;
+ }
+ .loader_2 span:nth-child(7) {
+ top: 151px;
+ right: 33px;
+ animation-delay: 1.4s;
+ }
+ .loader_2 span:nth-child(8) {
+ top: 167px;
+ right: 65px;
+ animation-delay: 1.6s;
+ }
+ .loader_2 span:nth-child(9) {
+ left: 68px;
+ bottom: 2px;
+ animation-delay: 1.8s;
+ }
+ .loader_2 span:nth-child(10) {
+ left: 35px;
+ bottom: 16px;
+ animation-delay: 2s;
+ }
+ .loader_2 span:nth-child(11) {
+ left: 13px;
+ bottom: 43px;
+ animation-delay: 2.2s;
+ }
+ .loader_2 span:nth-child(12) {
+ left: 0px;
+ bottom: 76px;
+ animation-delay: 2.4s;
+ }
+ .loader_2 span:nth-child(13) {
+ left: 5px;
+ bottom: 112px;
+ animation-delay: 2.6s;
+ }
+ .loader_2 span:nth-child(14) {
+ left: 23px;
+ bottom: 142px;
+ animation-delay: 2.8s;
+ }
+ .loader_2 span:nth-child(15) {
+ left: 50px;
+ bottom: 162px;
+ animation-delay: 3s;
+ }
+ @keyframes display {
+ 0% {
+ transform: scale(1);
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -ms-transform: scale(1);
+ -o-transform: scale(1);
+ }
+ 20% {
+ transform: scale(1);
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -ms-transform: scale(1);
+ -o-transform: scale(1);
+ }
+ 50% {
+ transform: scale(0);
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ -ms-transform: scale(0);
+ -o-transform: scale(0);
+ }
+ 100% {
+ transform: scale(0);
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ -ms-transform: scale(0);
+ -o-transform: scale(0);
+ }
+ }
+
+
+
+
+ .box2{
+ position: relative;
+ width:120px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+}
+
+span{
+ display: block;
+ width: 20px;
+ height: 20px;
+ background-color: white;
+ border-radius: 50%;
+ animation: effect .6s linear infinite alternate;
+ transform:scale(0) ;
+background: #000b1d;
+}
+
+
+span:nth-child(1)
+{
+ animation-delay: .1s;
+
+}
+span:nth-child(2)
+{
+ animation-delay: .2s;
+
+}
+span:nth-child(3)
+{
+ animation-delay: .3s;
+
+
+}
+span:nth-child(4)
+{
+ animation-delay: .4s;
+ background: #00B95F;
+
+}
+span:nth-child(5)
+{
+ animation-delay: .5s;
+ background: #00B95F;
+
+}
+
+
+@keyframes effect{
+100%{
+ transform: scale(1);
+
+}
+}
\ No newline at end of file