Skip to main content

Arcadis is Hiring!!!

 ARCADIS IS HIRING!!! Company : Arcadia Position : Software Engineer Experience : Bs/Ms Degree : BS in CS Apply Link: Apply Here
Post a Comment

Simple Css Loaders



 CSS Loaders


Webpack by itself only knows javascript, so when we want it to pack any other type of resources like .css or .scss or .ts, webpack needs help in order to compile and bundle those non-javascript types of resources.

Loaders are the node-based utilities built for webpack to help webpack to compile and/or transform a given type of resource that can be bundled as a javascript module.

css-loader is the npm module that would help webpack to collect CSS from all the css files referenced in your application and put it into a string.

And then style-loader would take the output string generated by the above css-loader and put it inside the <style> tags in the index.html file.

OUTPUT:



 

Lets have a Code:

HTML:

<div class="page">
<header class="header">
<h1 class="header-title">Loaders</h1>
<p class="header-subtitle">single html element css animation</p>
</header>
<main class="container">
<div class="item">
<i class="loader --2"></i>
</div>
<div class="item">
<i class="loader --9"></i>
</div>
<div class="item">
<i class="loader --3"></i>
</div>
<div class="item">
<i class="loader --4"></i>
</div>
<div class="item">
<i class="loader --1"></i>
</div>
<div class="item">
<i class="loader --5"></i>
</div>
<div class="item">
<i class="loader --6"></i>
</div>
<div class="item">
<i class="loader --8"></i>
</div>
<div class="item">
<i class="loader --7"></i>
</div>
</main>
</div>


CSS:

.loader {
--color: white;
--size-mid: 6vmin;
--size-dot: 1.5vmin;
--size-bar: 0.4vmin;
--size-square: 3vmin;
display: block;
position: relative;
width: 50%;
display: grid;
place-items: center;
}

.loader::before,
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
}

/**
loader --1
**/
.loader.--1::before {
width: var(--size-mid);
height: var(--size-mid);
border: 4px solid var(--color);
border-top-color: transparent;
border-radius: 50%;
animation: loader-1 1s linear infinite;
}

.loader.--1::after {
width: calc(var(--size-mid) - 2px);
height: calc(var(--size-mid) - 2px);
border: 2px solid transparent;
border-top-color: var(--color);
border-radius: 50%;
animation: loader-1 0.6s linear reverse infinite;
}

@keyframes loader-1 {
100% {
transform: rotate(1turn);
}
}

/**
loader --2
**/
.loader.--2::before,
.loader.--2::after {
width: var(--size-dot);
height: var(--size-dot);
background-color: var(--color);
border-radius: 50%;
opacity: 0;
animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
}

.loader.--2::after {
animation-delay: 0.3s;
}

@keyframes loader-2 {
0%, 80%, 100% {
opacity: 0;
}
33% {
opacity: 1;
}
0%, 100% {
transform: translateX(-4vmin);
}
90% {
transform: translateX(4vmin);
}
}

/**
loader --3
**/
.loader.--3::before,
.loader.--3::after {
width: var(--size-dot);
height: var(--size-dot);
background-color: var(--color);
border-radius: 50%;
animation: loader-3 1.2s ease-in-out infinite;
}

.loader.--3::before {
left: calc(50% - 1.6vmin - var(--size-dot));
}

.loader.--3::after {
left: calc(50% + 1.6vmin);
animation-delay: -0.4s;
}

@keyframes loader-3 {
0%, 100% {
transform: translateY(-2.6vmin);
}
44% {
transform: translateY(2.6vmin);
}
}

/**
loader --4
**/
.loader.--4::before {
height: var(--size-bar);
width: 6vmin;
background-color: var(--color);
animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
}

@keyframes loader-4 {
0%, 44%, 88.1%, 100% {
transform-origin: left;
}
0%, 100%, 88% {
transform: scaleX(0);
}
44.1%, 88% {
transform-origin: right;
}
33%, 44% {
transform: scaleX(1);
}
}

/**
loader --5
**/
.loader.--5::before,
.loader.--5::after {
height: 3vmin;
width: var(--size-bar);
background-color: var(--color);
animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;
}

.loader.--5::before {
left: calc(50% - 1vmin);
top: calc(50% - 3vmin);
}

.loader.--5::after {
left: calc(50% + 1vmin);
top: calc(50% - 1vmin);
animation-delay: 0.2s;
}

@keyframes loader-5 {
0%, 88%, 100% {
opacity: 0;
}
0% {
transform: translateY(-6vmin);
}
33% {
opacity: 1;
}
33%, 88% {
transform: translateY(3vmin);
}
}

/**
loader --6
**/
.loader.--6::before {
width: var(--size-square);
height: var(--size-square);
background-color: var(--color);
top: calc(50% - var(--size-square));
left: calc(50% - var(--size-square));
animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}

@keyframes loader-6 {
0%, 100% {
transform: none;
}
25% {
transform: translateX(100%);
}
50% {
transform: translateX(100%) translateY(100%);
}
75% {
transform: translateY(100%);
}
}

/**
loader --7
**/
.loader.--7::before,
.loader.--7::after {
width: var(--size-square);
height: var(--size-square);
background-color: var(--color);
}

.loader.--7::before {
top: calc(50% - var(--size-square));
left: calc(50% - var(--size-square));
animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}

.loader.--7::after {
top: 50%;
left: 50%;
animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}

@keyframes loader-7 {
0%, 100% {
transform: none;
}
25% {
transform: translateX(-100%);
}
50% {
transform: translateX(-100%) translateY(-100%);
}
75% {
transform: translateY(-100%);
}
}

/**
loader --8
**/
.loader.--8::before,
.loader.--8::after {
width: var(--size-dot);
height: var(--size-dot);
border-radius: 50%;
background-color: var(--color);
}

.loader.--8::before {
top: calc(50% + 4vmin);
animation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite;
}

.loader.--8::after {
opacity: 0;
top: calc(50% - 2vmin);
animation: loader-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite;
}

@keyframes loader-8-1 {
0%, 55%, 100% {
opacity: 0;
}
0% {
transform: scale(0.2);
}
22% {
opacity: 1;
}
33%, 55% {
transform: scale(1) translateY(-6vmin);
}
}

@keyframes loader-8-2 {
0%, 100% {
opacity: 0;
}
33% {
opacity: 0.3;
}
0% {
transform: scale(0);
}
100% {
transform: scale(4);
}
}

/**
loader --9
**/
.loader.--9::before,
.loader.--9::after {
width: var(--size-dot);
height: var(--size-dot);
border-radius: 50%;
background-color: var(--color);
animation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite;
}

.loader.--9::before {
left: calc(50% - var(--size-dot) - 1.6vmin);
}

.loader.--9::after {
left: calc(50% + 1.6vmin);
animation-delay: 0.12s;
}

@keyframes loader-9 {
0%, 100% {
opacity: 0;
}
0% {
transform: translate(-4vmin, -4vmin);
}
66% {
opacity: 1;
}
66%, 100% {
transform: none;
}
}

/**
miscs
**/

.container {
display: grid;
grid-template-columns: repeat(3, 18vmin);
grid-template-rows: repeat(3, 18vmin);
grid-gap: 1vmin;
}

.item {
background: rgba(255, 255, 255, 0.1);
display: grid;
place-items: center;
border-radius: 4px;
}

.page {
margin: auto;
}

.header {
margin-bottom: 4vmin;
}

.header-title {
font-size: 3.75vmin;
}

.header-subtitle {
font-size: 2vmin;
text-transform: uppercase;
opacity: 0.6;
}

html, body {
display: flex;
width: 100%;
height: 100%;
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
font-family: 'Noto Sans', sans-serif;
color: white;
text-align: center;
letter-spacing: 0.3px;
}

Comments

Post a Comment

Popular posts from this blog

Let's Start with the Internet Marketing | Affiliate Marketing

Digital Marketing is  that the act of promoting and mercantilism merchandise and services by leverage online selling ways like social media selling, search selling, and email marketing. At a high level, digital marketing refers to advertising delivered through digital channels like search engines, websites, social media, email, and mobile apps. Using these online media channels, digital marketing is that the method by which companies endorse goods, services, and brands. Consumers heavily depend upon digital means to research products. as an example, Think with Google marketing insights found that 48% of consumers start their inquiries on search engines, while 33% look to brand websites and 26% search within mobile applications. While modern-day digital marketing is an unlimited system of channels to which marketers simply must onboard their brands, advertising online is way more complex than the channels alone....
Post a Comment
Read more

Hewlett Packard Enterprise

CMS INTERN JOB   At Hewlett Packard Enterprise, we bring together the brightest minds to create breakthrough technology solutions that advance the way people live and work. What sets us apart? Our people and our relentless dedication to helping our customers make their mark on the world. We are a team of doers, dreamers and visionaries; inspired by our purpose and driven by our strategy. We live by our three values: partner, innovate and act. Our legacy inspires us as we forge ahead, always pushing to discover what’s next. Every day is a new opportunity to advance and grow ourselves, our company and the industry. Some people call it an obsession, we call it a way of life. SOME INFORMATIONS AND BASIC REQUIREMENTS REGARDING THE JOB: Job ID: 1104914 Date Posted: 10/26/2021 Primary Location: Bangalore, Karnataka Other Locations: Bangalore, Karnataka, India,Chennai,TAMILNADU, India Job Category: Graduate Program and Internships Schedule: Full time Shift: No shift premium (India) Respons...
Post a Comment
Read more