Loader-made-with-css/index.html at gh-pages · developscript/Loader-made-with-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>Loader-made-with-css by developscript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
    <link rel="stylesheet" type="text/css" href="loaders.css" media="screen">
    <style>
    .content-loader{
	display:block !important;
	height: 70px;
	text-align: center;
    }
    .margin-top{
	margin-top:30px;
    }
    </style>
  </head>
  <body>
    <section class="page-header">
      <h1 class="project-name">Loader-made-with-css</h1>
      <h2 class="project-tagline">You only have to include the css file.</h2>
      <a href="https://github.com/developscript/Loader-made-with-css" class="btn">View on GitHub</a>
      <a href="https://github.com/developscript/Loader-made-with-css/zipball/master" class="btn">Download .zip</a>
      <a href="https://github.com/developscript/Loader-made-with-css/tarball/master" class="btn">Download .tar.gz</a>
    </section>

    <section class="main-content">
      <h1>
<a id="Loader-made-with-css" class="anchor" href="#Loader-made-with-css" aria-hidden="true"><span class="octicon octicon-link"></span></a>Loader-made-with-css</h1>

<p>You only have to include the css file.</p>

<h2>
<a id="installation" class="anchor" href="#installation" aria-hidden="true"><span class="octicon octicon-link"></span></a>Installation</h2>

<p>Only add style CSS.</p>

<p><strong>Style CSS</strong></p>

<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">"</span>stylesheet<span class="pl-pds">"</span></span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>loaders.css<span class="pl-pds">"</span></span>&gt;</pre></div>

<h2>
<a id="loaders-types" class="anchor" href="#loaders-types" aria-hidden="true"><span class="octicon octicon-link"></span></a>Loaders types</h2>

<p><strong>Loader default</strong></p>

<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>loader loader-default<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;</pre></div>
<p><strong>Demo</strong></p>
<div class="content-loader">
	<div class="loader loader-default"></div>
</div>

<p><strong>Loader grill</strong></p>

<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>loader loader-grill<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;</pre></div>
<p><strong>Demo</strong></p>
<div class="content-loader margin-top">
	<div class="loader loader-grill"></div>
</div>

<p><strong>Loader circle</strong></p>

<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>loader loader-circle<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;</pre></div>
<p><strong>Demo</strong></p>
<div class="content-loader margin-top">
	<div class="loader loader-circle"></div>
</div>

<p><strong>Loader round circle</strong></p>

<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>loader loader-round-circle<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;</pre></div>
<p><strong>Demo</strong></p>
<div class="content-loader margin-top">
	<div class="loader loader-round-circle"></div>
</div>

<p><strong>Loader tadpole</strong></p>

<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>loader loader-tadpole<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;</pre></div>
<p><strong>Demo</strong></p>
<div class="content-loader margin-top">
	<div class="loader loader-tadpole"></div>
</div>

<p><strong>Loader ellipsis</strong></p>

<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>loader loader-ellipsis<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;</pre></div>
<p><strong>Demo</strong></p>
<div class="content-loader margin-top">
	<div class="loader loader-ellipsis"></div>
</div>

<p><strong>Loader bounce</strong></p>

<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>loader loader-bounce<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;</pre></div>
<p><strong>Demo</strong></p>
<div class="content-loader margin-top">
	<div class="loader loader-bounce"></div>
</div>

      <footer class="site-footer">
        <span class="site-footer-owner"><a href="https://github.com/developscript/Loader-made-with-css">Loader-made-with-css</a> is maintained by <a href="https://github.com/developscript">developscript</a>.</span>

        <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
      </footer>

    </section>


  </body>
</html>