Git Product home page Git Product logo

loading_bar's Introduction

loading...

→ Descrição do Projeto

Barra de progresso feita com JS

→ Status

Concluído✅

Desenvolvimento

Foi muito bom fazê-lo, principalmente, para conhecer novos métodos do JS e me familiarizar

Resultado

Na pasta screenshots com o nome de loading... está a gravação de tela mostrando o resultado, você também pode conferir aqui

Sreenshot

site com fundo preto, título em branco escrito: Loading, barra de progresso branca em 0%, botão de start

→ Tecnologias Utilizadas

logo do HTML em laranjalogo do CSS em azullogo do JavaScript em amarelo

→ Author

Código feito por Cecília Brito

loading_bar's People

Contributors

cecilia-brito avatar

Stargazers

 avatar

Watchers

 avatar

loading_bar's Issues

Code injection made by Live Server is duplicating a div and breaking my style/ O live server está inserindo um código que está duplicando uma div e atrapalhando o meu estilo css

Bug in Live Server

image
English: This never happened. What do I do? Is there any setting to disable this function?
Portuguese BR: Isso nunca aconteceu. O que eu faço? Existe alguma configuração para desativar essa função?

my html

<body>
        <header>
            <h1>Loading...</h1>
        </header>
        <main>
            <div>
                <span></span>
            </div>
            <button id="btn"></button>
        </main>
</body>

my css

html{
    font-size: 62.5%;
}
body{
    background-color: black;
    width: 100vw;
    height: 100vh;
}

header{
    width: 100%;
    height: auto;
    background-color: white;
}
main{
    display: flex;
    width: 100%;
    height: 80%;
    margin: auto;
}
div{
    margin: auto;
    width: 40rem;
    height: 5rem;
    border-radius: 5rem;
    background-color: white;
    clip-path: inset(0 0 0 0);
}

span{
    position: relative;
    display: block;
    width: 36rem;
    height: 3rem;
    border-radius: 5rem;
    background-color:black;
    clip-path: inset(0 0 0 0);
    margin: auto;
    margin-top: 1rem;
    transition: .6s all;
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.