CSS Dotted Waves Loading Widget

By | October 5, 2018

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

Demo Download

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

CSS Dotted Waves Loading Widget 1