main

分支 (1)

管理

管理

main

cssloaders.github.io
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
    <link rel="manifest" href="site.webmanifest">
    <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#ffffff">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS loaders and Spinners</title>

    <!-- Search Engine -->
    <meta name="title" content="CSS loaders and spinner">
    <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.">
    <meta name="keywords" content="css, loader, spinners , loading , waiting, css loading, cssloaders, css loaders, css3 loaders,  css spinners,  css3spinners, ,  css3 spinners, ,  cssspinners,  HTML, CSS3">
    <meta name="author" content="Vineeth TR">

    <!-- Schema.org for Google -->
    <meta itemprop="name" content="CSS loaders and spinner">
    <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.">
    <meta name="image" content="https://cssloaders.github.io/images/Loader-screen.png">

    <!-- Open Graph general (Facebook, Pinterest & Google+) -->
    <meta name="og:title" content="CSS loaders and spinners">
    <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.">
    <meta name="og:image" content="https://cssloaders.github.io/images/Loader-screen.png">
    <meta name="og:url" content="https://cssloaders.github.io/">
    <meta name="og:site_name" content="CSS loaders and spinners">
    <meta name="fb:admins" content="https://www.facebook.com/vinithtrv">
    <meta name="og:type" content="website">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="CSS loaders and spinners">
    <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.">
    <meta property="twitter:url" content="https://cssloaders.github.io/">
    <meta name="twitter:creator" content="@vineethtrv">
    <meta name="twitter:image:src" content="https://cssloaders.github.io/images/Loader-screen.png">

    <link rel="stylesheet" href="css/styles.css">


    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-4F1SESL3HZ"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-4F1SESL3HZ');
    </script>
</head>
<body>
    <header>
        <span class="brand">L &nbsp; aders</span>

        <nav>
            <a class="nav-btn codepen" target="_blank" href="https://codepen.io/vineethtrv/pen/NWxZqMM"></a>
            <a class="nav-btn git" target="_blank" href="https://github.com/vineethtrv/css-loader"></a>
        </nav>
    </header>

    <main id="main"></main>


    <footer>
        <a href="https://vineethtrv.github.io/" target="_blank" >
            <span>👨&zwj;💻</span>
            Vineeth TR
        </a>
    </footer>


    <div class="overlay">
        <div class="popup">
            <button class="btn-close">&times;</button>
            <div class="showcase"></div>
            <div class="code-content">
                <div class="code-area">
                    <div class="code-header">
                        HTML
                        <button class="copy" data-id="markup">Copy</button>
                    </div>
                    <code id="markup"></code>
                </div>
                <div class="code-area">
                    <div class="code-header">
                        CSS
                        <button class="copy" data-id="css">Copy</button>
                    </div>
                    <code id='css'></code>
                </div>
            </div>
        </div>
    </div>

    <script  type="module" src="./js/app.js"></script>
</body>
</html>