CSS Dotted Waves Loading Widget

CSS Dotted Waves Loading Widget developed using CSS, HTML. Demo and Download available.

Author Andrew Zamora

Created SEPTEMBER 16, 2018

License Open

Compatible browsers Chrome, Firefox, Safari

HTML Snippet

`<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Loaders</title>
</head>

<body>
    <h1>CSS Loading Widget</h1>
    <main>
        <h2>Loading</h2>
        <div class="container">
            <span id="Circle-1"></span>
            <span id="Circle-2"></span>
            <span id="Circle-3"></span>
            <span id="Circle-4"></span>
        </div>
    </main>
</body>

</html>`

CSS Code

`* {
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 {
    padding-bottom: 1em;
}

main {
    display: flex;
    width: 70%;
    height: 40%;
    background-color: rgb(71, 3, 134);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    25% {
        transform: translateY(-2em);
    }
}`

Preview