Skip to content

Commit 9cefc47

Browse files
Vineeth T RVineeth T R
Vineeth T R
authored and
Vineeth T R
committed
CSS loader added
1 parent 645b8cd commit 9cefc47

30 files changed

+15312
-0
lines changed

‎browserconfig.xml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<browserconfig>
3+
<msapplication>
4+
<tile>
5+
<square150x150logo src="/images/mstile-150x150.png"/>
6+
<TileColor>#da532c</TileColor>
7+
</tile>
8+
</msapplication>
9+
</browserconfig>

‎css/styles.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎images/Cooking.mp4

115 KB
Binary file not shown.

‎images/Frame 5.png

28.5 KB
Loading

‎images/Loader-one.png

4.78 KB
Loading

‎images/Loader-screen.png

54.3 KB
Loading

‎images/android-chrome-192x192.png

14.3 KB
Loading

‎images/android-chrome-512x512.png

46.1 KB
Loading

‎images/apple-touch-icon.png

13.2 KB
Loading

‎images/codepen.png

9.45 KB
Loading

‎images/favicon-16x16.png

1.17 KB
Loading

‎images/favicon-32x32.png

2.06 KB
Loading

‎images/favicon.ico

14.7 KB
Binary file not shown.

‎images/git.png

8.44 KB
Loading

‎images/loader.png

109 KB
Loading

‎images/mstile-150x150.png

9.26 KB
Loading

‎images/safari-pinned-tab.svg

+2,182
Loading

‎index.html

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
6+
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
7+
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
8+
<link rel="manifest" href="site.webmanifest">
9+
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#ffffff">
10+
<meta name="msapplication-TileColor" content="#da532c">
11+
<meta name="theme-color" content="#ffffff">
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
13+
<title>CSS loaders and Spinners</title>
14+
15+
<!-- Search Engine -->
16+
<meta name="title" content="CSS loaders and spinner">
17+
<meta name="description" content="CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. Hence it is easily customization too.">
18+
<meta name="keywords" content="css, loader, spinners , loading , waiting, css loading, cssloaders, css loaders, css3 loaders, css spinners, css3spinners, , css3 spinners, , cssspinners, HTML, CSS3">
19+
<meta name="author" content="Vineeth TR">
20+
21+
<!-- Schema.org for Google -->
22+
<meta itemprop="name" content="CSS loaders and spinner">
23+
<meta itemprop="description" content="CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. Hence it is easily customization too.">
24+
<meta name="image" content="https://cssloaders.github.io/images/Loader-screen.png">
25+
26+
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
27+
<meta name="og:title" content="CSS loaders and spinners">
28+
<meta name="og:description" content="CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. Hence it is easily customization too.">
29+
<meta name="og:image" content="https://cssloaders.github.io/images/Loader-screen.png">
30+
<meta name="og:url" content="https://cssloaders.github.io/">
31+
<meta name="og:site_name" content="CSS loaders and spinners">
32+
<meta name="fb:admins" content="https://www.facebook.com/vinithtrv">
33+
<meta name="og:type" content="website">
34+
35+
<!-- Twitter -->
36+
<meta name="twitter:card" content="summary">
37+
<meta name="twitter:title" content="CSS loaders and spinners">
38+
<meta name="twitter:description" content="CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. Hence it is easily customization too.">
39+
<meta property="twitter:url" content="https://cssloaders.github.io/">
40+
<meta name="twitter:creator" content="@vineethtrv">
41+
<meta name="twitter:image:src" content="https://cssloaders.github.io/images/Loader-screen.png">
42+
43+
<link rel="stylesheet" href="css/styles.css">
44+
45+
46+
<!-- Global site tag (gtag.js) - Google Analytics -->
47+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4F1SESL3HZ"></script>
48+
<script>
49+
window.dataLayer = window.dataLayer || [];
50+
function gtag() { dataLayer.push(arguments); }
51+
gtag('js', new Date());
52+
53+
gtag('config', 'G-4F1SESL3HZ');
54+
</script>
55+
</head>
56+
<body>
57+
<header>
58+
<span class="brand">L &nbsp; aders</span>
59+
60+
<nav>
61+
<a class="nav-btn codepen" target="_blank" href="https://codepen.io/vineethtrv/pen/NWxZqMM"></a>
62+
<a class="nav-btn git" target="_blank" href="https://github.com/vineethtrv/css-loader"></a>
63+
</nav>
64+
</header>
65+
66+
<main id="main"></main>
67+
68+
69+
<footer>
70+
<a href="https://vineethtrv.github.io/" target="_blank" >
71+
<span>👨&zwj;💻</span>
72+
Vineeth TR
73+
</a>
74+
</footer>
75+
76+
77+
<div class="overlay">
78+
<div class="popup">
79+
<button class="btn-close">&times;</button>
80+
<div class="showcase"></div>
81+
<div class="code-content">
82+
<div class="code-area">
83+
<div class="code-header">
84+
HTML
85+
<button class="copy" data-id="markup">Copy</button>
86+
</div>
87+
<code id="markup"></code>
88+
</div>
89+
<div class="code-area">
90+
<div class="code-header">
91+
CSS
92+
<button class="copy" data-id="css">Copy</button>
93+
</div>
94+
<code id='css'></code>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
100+
<script type="module" src="./js/app.js"></script>
101+
</body>
102+
</html>

‎js/app.js

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { BUBBLE } from './loaders/bubble.js';
2+
import { CIRCLE } from './loaders/circle.js';
3+
import { RECT } from './loaders/rect.js';
4+
import { LINE } from './loaders/line.js';
5+
import { PROGRESS } from './loaders/progress.js';
6+
import { TEXT } from './loaders/text.js';
7+
import { GRAPH } from './loaders/graph.js';
8+
import { OBJECTS } from './loaders/objects.js';
9+
import { SKELETON } from './loaders/skeleton.js';
10+
11+
12+
13+
const LOADERS = [...CIRCLE, ...BUBBLE, ...RECT, ...LINE, ...PROGRESS, ...TEXT, ...OBJECTS, ...GRAPH , ...SKELETON ];
14+
15+
16+
const main = document.getElementById('main');
17+
18+
19+
// Create Spinners
20+
LOADERS.forEach((loader, i) => {
21+
// Append Loader
22+
main.appendChild(createLoader(i));
23+
24+
})
25+
26+
27+
function createLoader(i){
28+
let loader = LOADERS[i];
29+
30+
// Create html
31+
let sectionEl = document.createElement('div');
32+
sectionEl.setAttribute('class', 'section');
33+
sectionEl.setAttribute('data-id', loader.id);
34+
sectionEl.setAttribute('data-index', (i + 1));
35+
let shadowRoot = sectionEl.attachShadow({ mode: 'open' });
36+
37+
let loaderEl = document.createElement('span');
38+
loaderEl.setAttribute('class', 'loader');
39+
loaderEl.innerHTML = loader.content || null;
40+
shadowRoot.appendChild(loaderEl);
41+
42+
//Create CSS
43+
let loaderStyles = document.createElement('style');
44+
loaderStyles.type = 'text/css';
45+
loaderStyles.innerHTML = loader.css;
46+
shadowRoot.appendChild(loaderStyles);
47+
48+
return sectionEl
49+
}
50+
51+
52+
53+
54+
document.querySelectorAll('#main .section').forEach(elm => {
55+
elm.addEventListener('click', (e) => {
56+
let index = parseInt(e.target.dataset.index);
57+
let showCase = document.querySelector('.showcase');
58+
59+
showCase.replaceChildren(createLoader((index - 1)));
60+
61+
62+
// console.log(e);
63+
showCase.dataset.index = index;
64+
65+
// load code
66+
document.querySelector('#markup').textContent = LOADERS[index - 1].html;
67+
document.querySelector('#css').textContent = LOADERS[index - 1].css;
68+
69+
// popup
70+
document.querySelector('body').classList.add('pop')
71+
document.querySelector('.overlay').classList.add('in')
72+
})
73+
})
74+
75+
76+
// close popup
77+
document.querySelector('.btn-close').addEventListener('click', (e) => {
78+
document.querySelector('body').classList.remove('pop')
79+
document.querySelector('.overlay').classList.remove('in');
80+
});
81+
82+
document.querySelector('.overlay').addEventListener('click', (e) => {
83+
if (e.target.className === "overlay in") {
84+
document.querySelector('body').classList.remove('pop')
85+
document.querySelector('.overlay').classList.remove('in');
86+
}
87+
});
88+
89+
90+
// Copy to clipboard
91+
document.querySelectorAll('.copy').forEach(copyBtn => {
92+
copyBtn.addEventListener('click', (e) => {
93+
const id = e.target.dataset.id;
94+
selectText(id);
95+
document.execCommand("copy");
96+
e.target.textContent = 'Copied';
97+
98+
setTimeout( time => e.target.textContent = 'Copy' , 300);
99+
})
100+
});
101+
102+
103+
// select Text
104+
function selectText(containerid) {
105+
if (document.selection) { // IE
106+
var range = document.body.createTextRange();
107+
range.moveToElementText(document.getElementById(containerid));
108+
range.select();
109+
} else if (window.getSelection) {
110+
var range = document.createRange();
111+
range.selectNode(document.getElementById(containerid));
112+
window.getSelection().removeAllRanges();
113+
window.getSelection().addRange(range);
114+
}
115+
}

0 commit comments

Comments
 (0)