CSS Dotted Waves Loading Widget

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

Demo Download

Author Andrew Zamora
Hits
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;
    /* Got box-shadow from materialize CSS website */
    box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}

main h2 {
    margin-top: auto;
    font-size: 5em;
    color: #fff;
}

.container {
    margin: 1.5em 0 auto 0;
}

span {
    height: 1.5em;
    width: 1.5em;
    background: rgb(14, 219, 219);
    display: inline-block;
    border-radius: 50%;
    margin: 0.3em;
}

#Circle-1 {
    animation: bounce 1.5s ease-in-out .10s infinite;
}

#Circle-2 {
    animation: bounce 1.5s ease-in-out .20s infinite;
}

#Circle-3 {
    animation: bounce 1.5s ease-in-out .30s infinite;
}

#Circle-4 {
    animation: bounce 1.5s ease-in-out .40s infinite;
}

@keyframes bounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }
/* If value is position circles will bounce down */
    25% {
        transform: translateY(-2em);
    }
}

Preview

CSS Dotted Waves Loading Widget preview

Advertisement

Google Matched Content...