├── animacao carregar
├── index.html
├── script.js
└── style.css
└── menu toggle
├── icon_b.png
├── index.html
├── script.js
└── style.css
/animacao carregar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/animacao carregar/script.js:
--------------------------------------------------------------------------------
1 | var porcent=document.querySelector('.porcent');
2 | var container=document.querySelector('.container');
3 | var loading=document.querySelector('.loading');
4 | var count=4;
5 |
6 | var load = setInterval(animate,50)
7 |
8 | function animate() {
9 | if(count==100){
10 |
11 | clearInterval(load);
12 | loading.parentElement.removeChild(loading)
13 | container.style.display='block';
14 |
15 | }else{
16 | count++;
17 | porcent.textContent=`${count}%`;
18 | }
19 | }
--------------------------------------------------------------------------------
/animacao carregar/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 | html{
7 | font-size: 10px;
8 | }
9 | .loading{
10 | width: 100%;
11 | height: 100%;
12 | background-color: #151515;
13 | position: absolute;
14 | top:0 ;
15 | left:0 ;
16 | display: flex;
17 | justify-content: center;
18 | align-items: center;
19 | }
20 | .spinner{
21 | position: relative;
22 | width: 8rem;
23 | height: 8rem;
24 | border-radius: 50%;
25 | }
26 | .spinner::before,.spinner:after{
27 | content: '';
28 | position: absolute;
29 | border-radius: 50%;
30 | }
31 | .spinner:before{
32 | width: 100%;
33 | height: 100%;
34 | background-image: linear-gradient(90deg,#ffa600 0%,#2ca3b3 100%);
35 | animation: spin 0.5s infinite linear;
36 | }
37 |
38 | @keyframes spin{
39 | to{
40 | transform: rotate(360deg);
41 | }
42 | }
43 |
44 | .spinner:after{
45 | width: 90%;
46 | height: 90%;
47 | background-color: #151515;
48 | top: 50%;
49 | left: 50%;
50 | transform: translate(-50%,-50%);
51 |
52 | }
53 | .porcent{
54 | color: #999;
55 | font-size: 25px;
56 | font-weight: 400;
57 | z-index: 1;
58 | position: absolute;
59 | top: 50%;
60 | left: 50%;
61 | transform: translate(-50%,-50%);
62 | }
--------------------------------------------------------------------------------
/menu toggle/icon_b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mauriciocosta404/animations-csss-js/9aecf8030bcf54afdfcf1bc1feb78328be851025/menu toggle/icon_b.png
--------------------------------------------------------------------------------
/menu toggle/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
16 | 
17 |
18 |
19 |
--------------------------------------------------------------------------------
/menu toggle/script.js:
--------------------------------------------------------------------------------
1 | (function readyJS(wim,doc){
2 | 'use strict';
3 |
4 | let btn=document.querySelector('#btn');
5 | let menu=document.querySelector('.menu');
6 | function toggle(event) {
7 | menu.classList.toggle('show')
8 | }
9 | btn.addEventListener('click',toggle,false);
10 | })(window,document)
--------------------------------------------------------------------------------
/menu toggle/style.css:
--------------------------------------------------------------------------------
1 | .menu{
2 | display: none;
3 |
4 | }
5 | .show{
6 | display: block;
7 | }
8 | #btn{
9 | cursor: pointer;
10 | }
--------------------------------------------------------------------------------